diff --git a/en/application-dev/application-models/arkts-ui-widget-update-by-status.md b/en/application-dev/application-models/arkts-ui-widget-update-by-status.md index b27958c66d3e174a66c80c90e46cdd71f5ecf668..5fb323813741a81e01b120507561e377995b7d90 100644 --- a/en/application-dev/application-models/arkts-ui-widget-update-by-status.md +++ b/en/application-dev/application-models/arkts-ui-widget-update-by-status.md @@ -1,7 +1,8 @@ # Updating Widget Content by State +There are cases where multiple copies of the same widget are added to the home screen to accommodate different needs. In these cases, the widget content needs to be dynamically updated based on the state. This topic exemplifies how this is implemented. -There are cases where multiple copies of the same widget are added to the home screen to accommodate different needs. In these cases, the widget content needs to be dynamically updated based on the state. This topic exemplifies how this is implemented. In the following example, two weather widgets are added to the home screen: one for displaying the weather of London, and the other Beijing, both configured to be updated at 07:00 every morning. The widget provider detects the target city, and then displays the city-specific weather information on the widgets. +In the following example, two copies of the weather widget are added to the home screen: one for displaying the weather of London, and the other Beijing, both configured to be updated at 07:00 every morning. The widget provider detects the target city, and then displays the city-specific weather information on the widgets. - Widget configuration file: Configure the widget to be updated at 07:00 every morning. @@ -94,7 +95,7 @@ There are cases where multiple copies of the same widget are added to the home s import formProvider from '@ohos.app.form.formProvider'; import formBindingData from '@ohos.app.form.formBindingData'; import FormExtensionAbility from '@ohos.app.form.FormExtensionAbility'; - import dataStorage from '@ohos.data.storage' + import dataPreferences from '@ohos.data.preferences'; export default class EntryFormAbility extends FormExtensionAbility { onAddForm(want) { @@ -102,10 +103,10 @@ There are cases where multiple copies of the same widget are added to the home s let isTempCard: boolean = want.parameters[formInfo.FormParam.TEMPORARY_KEY]; if (isTempCard === false) {// If the widget is a normal one, the widget information is persisted. console.info('Not temp card, init db for:' + formId); - let storeDB = dataStorage.getStorageSync(this.context.filesDir + 'myStore') - storeDB.putSync('A' + formId, 'false'); - storeDB.putSync('B' + formId, 'false'); - storeDB.flushSync(); + let storeDB = dataPreferences.getPreferences(this.context, 'mystore') + storeDB.put('A' + formId, 'false'); + storeDB.put('B' + formId, 'false'); + storeDB.flush(); } let formData = {}; return formBindingData.createFormBindingData(formData); @@ -113,24 +114,24 @@ There are cases where multiple copies of the same widget are added to the home s onRemoveForm(formId) { console.info('onRemoveForm, formId:' + formId); - let storeDB = dataStorage.getStorageSync(this.context.filesDir + 'myStore') - storeDB.deleteSync('A' + formId); - storeDB.deleteSync('B' + formId); + let storeDB = dataPreferences.getPreferences(this.context, 'mystore') + storeDB.delete('A' + formId); + storeDB.delete('B' + formId); } // If the widget is a temporary one, it is recommended that the widget information be persisted when the widget is converted to a normal one. onCastToNormalForm(formId) { console.info('onCastToNormalForm, formId:' + formId); - let storeDB = dataStorage.getStorageSync(this.context.filesDir + 'myStore') - storeDB.putSync('A' + formId, 'false'); - storeDB.putSync('B' + formId, 'false'); - storeDB.flushSync(); + let storeDB = dataPreferences.getPreferences(this.context, 'myStore') + storeDB.put('A' + formId, 'false'); + storeDB.put('B' + formId, 'false'); + storeDB.flush(); } onUpdateForm(formId) { - let storeDB = dataStorage.getStorageSync(this.context.filesDir + 'myStore') - let stateA = storeDB.getSync('A' + formId, 'false').toString() - let stateB = storeDB.getSync('B' + formId, 'false').toString() + let storeDB = dataPreferences.getPreferences(this.context, 'myStore') + let stateA = storeDB.get('A' + formId, 'false').toString() + let stateB = storeDB.get('B' + formId, 'false').toString() // Update textA in state A. if (stateA === 'true') { let formInfo = formBindingData.createFormBindingData({ @@ -150,17 +151,17 @@ There are cases where multiple copies of the same widget are added to the home s onFormEvent(formId, message) { // Store the widget state. console.info('onFormEvent formId:' + formId + 'msg:' + message); - let storeDB = dataStorage.getStorageSync(this.context.filesDir + 'myStore') + let storeDB = dataPreferences.getPreferences(this.context, 'myStore') let msg = JSON.parse(message) if (msg.selectA != undefined) { console.info('onFormEvent selectA info:' + msg.selectA); - storeDB.putSync('A' + formId, msg.selectA); + storeDB.put('A' + formId, msg.selectA); } if (msg.selectB != undefined) { console.info('onFormEvent selectB info:' + msg.selectB); - storeDB.putSync('B' + formId, msg.selectB); + storeDB.put('B' + formId, msg.selectB); } - storeDB.flushSync(); + storeDB.flush(); } }; ``` @@ -168,4 +169,4 @@ There are cases where multiple copies of the same widget are added to the home s > **NOTE** > -> When the local database is used for widget information persistence, it is recommended that [TEMPORARY_KEY](../reference/apis/js-apis-app-form-formInfo.md#formparam) be used to determine whether the currently added widget is a normal one in the [onAddForm](../reference/apis/js-apis-app-form-formExtensionAbility.md#onaddform) lifecycle callback. If the widget is a normal one, the widget information is directly persisted. If the widget is a temporary one, the widget information is persisted when the widget is converted to a normal one ([onCastToNormalForm](../reference/apis/js-apis-app-form-formExtensionAbility.md#oncasttonormalform)). In addition, the persistent widget information needs to be deleted when the widget is destroyed ([onRemoveForm](../reference/apis/js-apis-app-form-formExtensionAbility.md#onremoveform)), preventing the database size from continuously increasing due to repeated widget addition and deletion. +> When the local database is used for widget information persistence, it is recommended that [TEMPORARY_KEY](../reference/apis/js-apis-app-form-formInfo.md#formparam) be used in the [onAddForm](../reference/apis/js-apis-app-form-formExtensionAbility.md#onaddform) lifecycle callback to determine whether the currently added widget is a normal one. If the widget is a normal one, the widget information is directly persisted. If the widget is a temporary one, the widget information is persisted when the widget is converted to a normal one ([onCastToNormalForm](../reference/apis/js-apis-app-form-formExtensionAbility.md#oncasttonormalform)). In addition, the persistent widget information needs to be deleted when the widget is destroyed ([onRemoveForm](../reference/apis/js-apis-app-form-formExtensionAbility.md#onremoveform)), preventing the database size from continuously increasing due to repeated widget addition and deletion. diff --git a/en/application-dev/faqs/Readme-EN.md b/en/application-dev/faqs/Readme-EN.md index f8be4624e327beb9af4c69ec3ef077e8193149f8..43c138b6b3f5b7a9b7000c137393435bcfdaa442 100644 --- a/en/application-dev/faqs/Readme-EN.md +++ b/en/application-dev/faqs/Readme-EN.md @@ -3,7 +3,7 @@ - [Full SDK Compilation](full-sdk-compile-guide.md) - [Switching to Full SDK](full-sdk-switch-guide.md) - [Application Model Development](faqs-ability.md) -- ArkUI Framework Development (ArkTS) +- ArkUI Development (ArkTS) - [ArkTS Syntax Usage](faqs-arkui-arkts.md) - [ArkUI Component Development (ArkTS)](faqs-arkui-component.md) - [ArkUI Layout Development (ArkTS)](faqs-arkui-layout.md) diff --git a/en/application-dev/reference/apis/js-apis-font.md b/en/application-dev/reference/apis/js-apis-font.md index 0b7d7fb3abcb1353d022e70ea785f6454cd422b4..dad280bb91d43d69f78f719cc8733fc212fec826 100644 --- a/en/application-dev/reference/apis/js-apis-font.md +++ b/en/application-dev/reference/apis/js-apis-font.md @@ -5,6 +5,8 @@ The **font** module provides APIs for registering custom fonts. > **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. +> +> The APIs provided by this module are system APIs. ## Modules to Import @@ -62,3 +64,104 @@ struct FontExample { } } ``` +## font.getSystemFontList + +getSystemFontList(): Array\ + +Obtains the list of supported fonts. + +**System capability**: SystemCapability.ArkUI.ArkUI.Full + +**Return value** + +| Type | Description | +| -------------------- | ----------------- | +| Array\ | List of supported fonts. | + +## Example + +```ts +// xxx.ets +import font from '@ohos.font'; + +@Entry +@Component +struct FontExample { + fontList: Array; + build() { + Column() { + Button("getSystemFontList") + .width('60%') + .height('6%') + .onClick(()=>{ + this.fontList = font.getSystemFontList() + }) + }.width('100%') + } +} +``` + +## font.getFontByName + +getFontByName(fontName: string): FontInfo; + +Obtains information about a system font based on the font name. + +**System capability**: SystemCapability.ArkUI.ArkUI.Full + +**Parameters** + +| Name | Type | Mandatory | Description | +| ---------- | --------- | ------- | ------------ | +| fontName | string | Yes | System font name.| + +**Return value** + +| Type | Description | +| ---------------- | ---------------------------- | +| FontInfo | Information about the system font. | + +## FontInfo + +| Name | Type | Description | +| -------------- | ------- | ------------------------- | +| path | string | File path of the system font. | +| postScriptName | string | PostScript name of the system font.| +| fullName | string | Name of the system font. | +| family | string | Family of the system font. | +| subfamily | string | Subfamily of the system font. | +| weight | number | Weight of the system font. | +| width | number | Width of the system font. | +| italic | boolean | Whether the system font is italic. | +| monoSpace | boolean | Whether the system font is monospaced. | +| symbolic | boolean | Whether the system font supports symbols. | + +```ts +// xxx.ets +import font from '@ohos.font'; + +@Entry +@Component +struct FontExample { + fontList: Array; + fontInfo: font.FontInfo; + build() { + Column() { + Button("getFontByName") + .onClick(() => { + this.fontInfo = font.getFontByName('HarmonyOS Sans Italic') + console.log("getFontByName(): path = " + this.fontInfo.path) + console.log("getFontByName(): postScriptName = " + this.fontInfo.postScriptName) + console.log("getFontByName(): fullName = " + this.fontInfo.fullName) + console.log("getFontByName(): Family = " + this.fontInfo.family) + console.log("getFontByName(): Subfamily = " + this.fontInfo.subfamily) + console.log("getFontByName(): weight = " + this.fontInfo.weight) + console.log("getFontByName(): width = " + this.fontInfo.width) + console.log("getFontByName(): italic = " + this.fontInfo.italic) + console.log("getFontByName(): monoSpace = " + this.fontInfo.monoSpace) + console.log("getFontByName(): symbolic = " + this.fontInfo.symbolic) + }) + }.width('100%') + } +} +``` diff --git a/en/application-dev/reference/apis/js-apis-plugincomponent.md b/en/application-dev/reference/apis/js-apis-plugincomponent.md index 618c2d3a50afd39131af6e914adc9e666eadc69e..0ae1baf6eebdadbbdc9d43de1e9c100ac73163db 100644 --- a/en/application-dev/reference/apis/js-apis-plugincomponent.md +++ b/en/application-dev/reference/apis/js-apis-plugincomponent.md @@ -4,7 +4,7 @@ The **PluginComponentManager** module provides APIs for the **PluginComponent** > **NOTE** > -> The initial APIs of this module are supported since API version 8. 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 8. Newly added APIs will be marked with a superscript to indicate their earliest API version. ## Modules to Import @@ -18,10 +18,10 @@ Describes the **PluginComponent** template parameters. **System capability**: SystemCapability.ArkUI.ArkUI.Full -| Name | Type | Mandatory| Description | -| ---------- | ------ | ---- | --------------------------- | -| source | string | Yes | Component template name. | -| bundleName | string | Yes | Bundle name of the provider ability.| +| Name | Type | Mandatory | Description | +| ---------- | ------ | ---- | ---------------------- | +| source | string | Yes | Component template name. | +| bundleName | string | Yes | Bundle name of the provider ability.| ## PluginComponentManager @@ -33,14 +33,14 @@ Stores information in key-value pairs in JSON format. **System capability**: SystemCapability.ArkUI.ArkUI.Full -| Value Range | Description | -| --------------------- | ---------------------------------------- | +| Value Range | Description | +| --------------------- | -------------------- | | [key: string] | Keyword. The value is a string and can be an empty string.| -| number | Key value of the number type. | +| number | Key value of the number type. | | string | Key value of the string type. The value can be an empty string.| -| boolean | Key value of the Boolean type. | -| [] | Key value. The value can be []. | -| [KVObject](#kvobject) | Key value of the KVObject type. | +| boolean | Key value of the Boolean type. | +| [] | Key value. The value can be []. | +| [KVObject](#kvobject) | Key value of the KVObject type. | ### PushParameters @@ -51,13 +51,13 @@ Sets the parameters to be passed in the **PluginManager.Push** API in the FA mod **System capability**: SystemCapability.ArkUI.ArkUI.Full -| Name | Type | Mandatory| Description | -| --------- | ----------------------------------- | ---- | -------------------------------------------------------------- | -| want | [Want](js-apis-application-want.md) | Yes | Ability information of the component user. | -| name | string | Yes | Component name. | -| data | [KVObject](#kvobject) | Yes | Component data value. | -| extraData | [KVObject](#kvobject) | Yes | Additional data value. | -| jsonPath | string | No | Path to the [external.json](#about-the-externaljson-file) file that stores the template path.| +| Name | Type | Mandatory | Description | +| --------- | ----------------------------------- | ---- | ---------------------------------------- | +| want | [Want](js-apis-application-want.md) | Yes | Ability information of the component user. | +| name | string | Yes | Component name. | +| data | [KVObject](#kvobject) | Yes | Component data value. | +| extraData | [KVObject](#kvobject) | Yes | Additional data value. | +| jsonPath | string | No | Path to the [external.json](#about-the-externaljson-file) file that stores the template path.| ### PushParameterForStage @@ -69,14 +69,14 @@ Sets the parameters to be passed in the **PluginManager.Push** API in the stage **System capability**: SystemCapability.ArkUI.ArkUI.Full -| Name | Type | Mandatory| Description | -| --------- | ----------------------------------- | ---- | ---------------------------------------------------------------- | -| owner | [Want](js-apis-application-want.md) | Yes | Ability information of the component provider. | -| target | [Want](js-apis-application-want.md) | Yes | Ability information of the component user. | -| name | string | Yes | Component name. | -| data | [KVObject](#kvobject) | Yes | Component data value. | -| extraData | [KVObject](#kvobject) | Yes | Additional data value. | -| jsonPath | string | No | Path to the [external.json](#about-the-externaljson-file) file that stores the template path.| +| Name | Type | Mandatory | Description | +| --------- | ----------------------------------- | ---- | ---------------------------------------- | +| owner | [Want](js-apis-application-want.md) | Yes | Ability information of the component provider. | +| target | [Want](js-apis-application-want.md) | Yes | Ability information of the component user. | +| name | string | Yes | Component name. | +| data | [KVObject](#kvobject) | Yes | Component data value. | +| extraData | [KVObject](#kvobject) | Yes | Additional data value. | +| jsonPath | string | No | Path to the [external.json](#about-the-externaljson-file) file that stores the template path.| ### RequestParameters @@ -86,12 +86,12 @@ Sets the parameters to be passed in the **PluginManager.Request** API in the FA **System capability**: SystemCapability.ArkUI.ArkUI.Full -| Name | Type | Mandatory| Description | -| -------- | ----------------------------------- | ---- | --------------------------------------------------------------------------------------------------------------------- | -| want | [Want](js-apis-application-want.md) | Yes | Ability information of the component provider. | -| name | string | Yes | Name of the requested component. | -| data | [KVObject](#kvobject) | Yes | Additional data. | -| jsonPath | string | No | Path to the [external.json](#about-the-externaljson-file) file that stores the template path. Request communication is not triggered when **jsonPath** is not empty or not set.| +| Name | Type | Mandatory | Description | +| -------- | ----------------------------------- | ---- | ---------------------------------------- | +| want | [Want](js-apis-application-want.md) | Yes | Ability information of the component provider. | +| name | string | Yes | Name of the requested component. | +| data | [KVObject](#kvobject) | Yes | Additional data. | +| jsonPath | string | No | Path to the [external.json](#about-the-externaljson-file) file that stores the template path. Request communication is not triggered when **jsonPath** is not empty or not set.| ### RequestParameterForStage @@ -103,13 +103,13 @@ Sets the parameters to be passed in the **PluginManager.Request** API in the sta **System capability**: SystemCapability.ArkUI.ArkUI.Full -| Name | Type | Mandatory| Description | -| -------- | ----------------------------------- | ---- | --------------------------------------------------------------------------------------------------------------------- | -| owner | [Want](js-apis-application-want.md) | Yes | Ability information of the component user. | -| target | [Want](js-apis-application-want.md) | Yes | Ability information of the component provider. | -| name | string | Yes | Name of the requested component. | -| data | [KVObject](#kvobject) | Yes | Additional data. | -| jsonPath | string | No | Path to the [external.json](#about-the-externaljson-file) file that stores the template path. Request communication is not triggered when **jsonPath** is not empty or not set.| +| Name | Type | Mandatory | Description | +| -------- | ----------------------------------- | ---- | ---------------------------------------- | +| owner | [Want](js-apis-application-want.md) | Yes | Ability information of the component user. | +| target | [Want](js-apis-application-want.md) | Yes | Ability information of the component provider. | +| name | string | Yes | Name of the requested component. | +| data | [KVObject](#kvobject) | Yes | Additional data. | +| jsonPath | string | No | Path to the [external.json](#about-the-externaljson-file) file that stores the template path. Request communication is not triggered when **jsonPath** is not empty or not set.| ### RequestCallbackParameters @@ -117,11 +117,11 @@ Provides the result returned after the **PluginManager.Request** API is called. **System capability**: SystemCapability.ArkUI.ArkUI.Full -| Name | Type | Mandatory| Description | -| ----------------- | --------------------------------------------------- | ---- | ---------- | -| componentTemplate | [PluginComponentTemplate](#plugincomponenttemplate) | Yes | Component template.| -| data | [KVObject](#kvobject) | Yes | Component data.| -| extraData | [KVObject](#kvobject) | Yes | Additional data.| +| Name | Type | Mandatory | Description | +| ----------------- | ---------------------------------------- | ---- | ----- | +| componentTemplate | [PluginComponentTemplate](#plugincomponenttemplate) | Yes | Component template.| +| data | [KVObject](#kvobject) | Yes | Component data.| +| extraData | [KVObject](#kvobject) | Yes | Additional data.| ### RequestEventResult @@ -129,11 +129,11 @@ Provides the result returned after the request listener is registered and the re **System capability**: SystemCapability.ArkUI.ArkUI.Full -| Name | Type | Mandatory| Description | -| --------- | --------------------- | ---- | ---------- | -| template | string | No | Component template.| -| data | [KVObject](#kvobject) | No | Component data.| -| extraData | [KVObject](#kvobject) | No | Additional data.| +| Name | Type | Mandatory | Description | +| --------- | --------------------- | ---- | ----- | +| template | string | No | Component template.| +| data | [KVObject](#kvobject) | No | Component data.| +| extraData | [KVObject](#kvobject) | No | Additional data.| ### OnPushEventCallback @@ -144,12 +144,12 @@ Registers the listener for the push event. **Parameters** -| Name | Type | Mandatory| Description | -| --------- | --------------------------------------------------- | ---- | ---------------------------------------- | -| source | [Want](js-apis-application-want.md) | Yes | Information about the push request sender. | -| template | [PluginComponentTemplate](#plugincomponenttemplate) | Yes | Name of the request component template for the push request sender.| -| data | [KVObject](#kvobject) | Yes | Data. | -| extraData | [KVObject](#kvobject) | Yes | Additional data. | +| Name | Type | Mandatory | Description | +| --------- | ---------------------------------------- | ---- | ---------------------- | +| source | [Want](js-apis-application-want.md) | Yes | Information about the push request sender. | +| template | [PluginComponentTemplate](#plugincomponenttemplate) | Yes | Name of the request component template for the push request sender.| +| data | [KVObject](#kvobject) | Yes | Data. | +| extraData | [KVObject](#kvobject) | Yes | Additional data. | **Example** @@ -172,11 +172,11 @@ Registers the listener for the request event. **Parameters** -| Name | Type | Mandatory| Description | -| --------- | ----------------------------------- | ---- | --------------------------- | -| source | [Want](js-apis-application-want.md) | Yes | Information about the request sender.| -| name | string | Yes | Template name. | -| extraData | [KVObject](#kvobject) | Yes | Additional data. | +| Name | Type | Mandatory | Description | +| --------- | ----------------------------------- | ---- | ----------------- | +| source | [Want](js-apis-application-want.md) | Yes | Information about the request sender.| +| name | string | Yes | Template name. | +| extraData | [KVObject](#kvobject) | Yes | Additional data. | **Example** @@ -200,10 +200,10 @@ Pushes the component and data to the component user. **Model restriction**: This API can be used only in the FA model. **Parameters** -| Name | Type | Mandatory| Description | -| -------- | --------------------------------- | ---- | ------------------------ | -| param | [PushParameters](#pushparameters) | Yes | Information about the component user. | -| callback | AsyncCallback<void> | Yes | Asynchronous callback used to return the result.| +| Name | Type | Mandatory | Description | +| -------- | --------------------------------- | ---- | ------------ | +| param | [PushParameters](#pushparameters) | Yes | Information about the component user. | +| callback | AsyncCallback<void> | Yes | Asynchronous callback used to return the result.| **Example** @@ -241,10 +241,10 @@ Pushes the component and data to the component user. **Model restriction**: This API can be used only in the stage model. **Parameters** -| Name | Type | Mandatory| Description | -| -------- | ----------------------------------------------- | ---- | ------------------------ | -| param | [PushParameterForStage](#pushparameterforstage) | Yes | Information about the component user. | -| callback | AsyncCallback<void> | Yes | Asynchronous callback used to return the result.| +| Name | Type | Mandatory | Description | +| -------- | ---------------------------------------- | ---- | ------------ | +| param | [PushParameterForStage](#pushparameterforstage) | Yes | Information about the component user. | +| callback | AsyncCallback<void> | Yes | Asynchronous callback used to return the result.| **Example** @@ -289,10 +289,10 @@ Requests the component from the component provider. **Parameters** -| Name | Type | Mandatory| Description | -| -------- | ---------------------------------------------------------------------------------------------- | ---- | ---------------------------------------------------------------- | -| param | [RequestParameters](#requestparameters) | Yes | Information about the component request. | -| callback | AsyncCallback<[RequestCallbackParameters](#requestcallbackparameters) \| void> | Yes | Asynchronous callback used to return the requested data.| +| Name | Type | Mandatory | Description | +| -------- | ---------------------------------------- | ---- | ----------------------------------- | +| param | [RequestParameters](#requestparameters) | Yes | Information about the component request. | +| callback | AsyncCallback<[RequestCallbackParameters](#requestcallbackparameters) \| void> | Yes | Asynchronous callback used to return the requested data.| **Example** @@ -332,10 +332,10 @@ Requests the component from the component provider. **Parameters** -| Name | Type | Mandatory| Description | -| -------- | ---------------------------------------------------------------------------------------------- | ---- | ---------------------------------------------------------------- | -| param | [RequestParameterForStage](#requestparameterforstage) | Yes | Information about the component request. | -| callback | AsyncCallback<[RequestCallbackParameters](#requestcallbackparameters) \| void> | Yes | Asynchronous callback used to return the requested data.| +| Name | Type | Mandatory | Description | +| -------- | ---------------------------------------- | ---- | ----------------------------------- | +| param | [RequestParameterForStage](#requestparameterforstage) | Yes | Information about the component request. | +| callback | AsyncCallback<[RequestCallbackParameters](#requestcallbackparameters) \| void> | Yes | Asynchronous callback used to return the requested data.| **Example** @@ -371,10 +371,10 @@ Listens for events of the request type and returns the requested data, or listen **Parameters** -| Name | Type | Mandatory| Description | -| --------- | ---------------------------------------------------------------------------------------------------------- | ---- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| eventType | string | Yes | Type of the event to listen for. The options are as follows:
**"push"**: The component provider pushes data to the component consumer.
**"request"**: The component consumer proactively requests data from the component provider. | -| callback | [OnPushEventCallback](#onpusheventcallback) \| [OnRequestEventCallback](#onrequesteventcallback) | Yes | Callback used to return the result. The type is [OnPushEventCallback](#onpusheventcallback) for the push event and [OnRequestEventCallback](#onrequesteventcallback) for the request event.| +| Name | Type | Mandatory | Description | +| --------- | ---------------------------------------- | ---- | ---------------------------------------- | +| eventType | string | Yes | Type of the event to listen for. The options are as follows:
**"push"**: The component provider pushes data to the component consumer.
**"request"**: The component consumer proactively requests data from the component provider.| +| callback | [OnPushEventCallback](#onpusheventcallback) \| [OnRequestEventCallback](#onrequesteventcallback) | Yes | Callback used to return the result. The type is [OnPushEventCallback](#onpusheventcallback) for the push event and [OnRequestEventCallback](#onrequesteventcallback) for the request event.| **Example** diff --git a/en/application-dev/reference/arkui-ts/Readme-EN.md b/en/application-dev/reference/arkui-ts/Readme-EN.md index bb367dd6c32061334312afe76f0acee149f06bee..a1408eba5cdd14511f6f1be10288e9c641bd8522 100644 --- a/en/application-dev/reference/arkui-ts/Readme-EN.md +++ b/en/application-dev/reference/arkui-ts/Readme-EN.md @@ -12,7 +12,7 @@ - [Mouse Event](ts-universal-mouse-key.md) - [Component Area Change Event](ts-universal-component-area-change-event.md) - [Visible Area Change Event](ts-universal-component-visible-area-change-event.md) - - [Custom Keyboard Shortcuts](ts-universal-events-keyboardshortcut.md) + - [Component Keyboard Shortcut Event](ts-universal-events-keyboardshortcut.md) - Universal Attributes - [Size](ts-universal-attributes-size.md) - [Location](ts-universal-attributes-location.md) @@ -43,7 +43,7 @@ - Touch Interactions - [Touch Target](ts-universal-attributes-touch-target.md) - [Hit Test Control](ts-universal-attributes-hit-test-behavior.md) - - Touch Interactions + - Transition - [Modal Transition](ts-universal-attributes-modal-transition.md) - [Sheet Transition](ts-universal-attributes-sheet-transition.md) - [Obscuring](ts-universal-attributes-obscured.md) diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194352468.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194352468.gif deleted file mode 100644 index 58feeb2988e8d9a643234691ae4d5cf5ccef6d4f..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194352468.gif and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-click.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-click.md index f6ed907ac1dc0941cc422e262298359a52257b45..5b83363ed4374806ef0f4daca3db716ce1d22e91 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-click.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-click.md @@ -12,7 +12,7 @@ Click control attributes are used to set whether a component can respond to fing | Name | Type| Description | | ----------- | -------- | ------------------------ | -| touchable | boolean | Whether the component can respond to finger interactions such as click and touch events.
Default value: **true**| +| touchable(deprecated) | boolean | Whether the component can respond to finger interactions such as click and touch events.
Default value: **true**
**NOTE**
This API is deprecated since API version 9. You are advised to use [hitTestBehavior](ts-universal-attributes-hit-test-behavior.md) instead.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-universal-events-keyboardshortcut.md b/en/application-dev/reference/arkui-ts/ts-universal-events-keyboardshortcut.md index 011fe91e02257575d4f11e08cc502e34e1dcf286..5efbffa663ce4c8126c4bb0bc0b236fa766c9e3f 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-events-keyboardshortcut.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-events-keyboardshortcut.md @@ -1,4 +1,4 @@ -# Custom Keyboard Shortcuts +# Component Keyboard Shortcut Event You can set one or more custom keyboard shortcuts for a component. The behavior of these keyboard shortcuts is the same as that of clicks. Components can respond to custom keyboard shortcuts even when they are not focused. @@ -12,23 +12,23 @@ keyboardShortcut(value: string | [FunctionKey], keys: Array<[ModifierKey]>) **Parameters** -| Name| Type | Mandatory| Description | -| ------ | ------------------------------------- | ---- | ------------------------------------------------------------ | -| value | string \| [FunctionKey](#functionkey) | Yes | Character key (which can be entered through the keyboard) or [function key](#functionkey).
| -| keys | Array<[ModifierKey](#modifierkey)> | Yes | Modifier keys.
| +| Name | Type | Mandatory | Description | +| ----- | ------------------------------------- | ---- | ---------------------------------------- | +| value | string \| [FunctionKey](#functionkey) | Yes | Character key (which can be entered through the keyboard) or [function key](#functionkey).
| +| keys | Array<[ModifierKey](#modifierkey)> | Yes | Modifier keys.
| ## ModifierKey -| Name | Description | -| ----- | ------------------- | +| Name | Description | +| ----- | ------------ | | CTRL | Ctrl key on the keyboard. | | SHIFT | Shift key on the keyboard.| | ALT | Alt key on the keyboard. | ## FunctionKey -| Name| Description | -| ---- | --------------------- | +| Name | Description | +| ---- | ------------ | | ESC | Esc key on the keyboard.| | F1 | F1 key on the keyboard. | | F2 | F2 key on the keyboard. | @@ -45,35 +45,35 @@ keyboardShortcut(value: string | [FunctionKey], keys: Array<[ModifierKey]>) ## Precautions for Using Keyboard Shortcuts -| Scenario | Processing Logic | Example | -| ------------------------------------------------------------ | -------------------------------------------------------- | ------------------------------------------------------------ | -| All components that support the **onClick** event | Custom keyboard shortcuts are supported. | – | -| Requirements for custom keyboard shortcuts | A custom keyboard shortcut consists of one or more modifier keys (**Ctrl**, **Shift**, **Alt**, or any combination thereof) and a character key or function key.| Button('button1').keyboardShortcut('a',[ModifierKey.CTRL]) | -| Setting one custom keyboard shortcut for multiple components | Only the first component in the component tree responds to the custom keyboard shortcut. | Button('button1').keyboardShortcut('a',[ModifierKey.CTRL])
Button('button2').keyboardShortcut('a',[ModifierKey.CTRL]) | -| When the component is focused or not | The component responds to the custom keyboard shortcut as long as the window is focused. | – | -| When a single keyboard shortcut is set, it can be canceled by setting the **value**, **keys**, or both of them to null in the **keyboardShortcut** API.
When multiple keyboard shortcuts are set, they cannot be canceled.| Canceling the custom keyboard shortcut settings | Button('button1').keyboardShortcut('',[ModifierKey.CTRL])
Button('button2').keyboardShortcut('a',[l])
Button('button3').keyboardShortcut('',[]) | -| The independent pipeline sub-window and main window coexist | The focused window responds to the keyboard shortcut. | – | -| Ctrl, Shift, or Alt key in the **keys** parameter of the **keyboardShortcut** API | Both the keys on the left or right sides of the keyboard work. | Button('button1').keyboardShortcut('a',[ModifierKey.CTRL, ModifierKey.ALT]) | -| Character key in the **value** parameter of the **keyboardShortcut** API | The response is case-insensitive. | Button('button1').keyboardShortcut('a',[ModifierKey.CTRL])
Button('button2').keyboardShortcut('A',[ModifierKey.CTRL]) | -| Response to keyboard shortcuts | The component responds continuously to the keyboard shortcut when all the set keys are pressed. | – | -| Hidden component
| The keyboard shortcut also works. | – | -| Components in the disable state | The keyboard shortcut does not work. | – | -| 1. The keyboard shortcut is the same as an existing one (including the system-defined ones).
2. The **value** parameter contains multiple character keys.
3. The **key** parameter has a duplicate modifier key.| In these cases, the keyboard shortcut is not added, and the previously added keyboard shortcuts still work. | Button('button1').keyboardShortcut('c',[ModifierKey.CTRL])
Button('button2').keyboardShortcut('ab',[ModifierKey.CTRL])
Button('button3').keyboardShortcut('ab',[ModifierKey.CTRL,ModifierKey.CTRL]) | +| Scenario | Processing Logic | Example | +| ---------------------------------------- | ---------------------------------- | ---------------------------------------- | +| All components that support the **onClick** event | Custom keyboard shortcuts are supported. | – | +| Requirements for custom keyboard shortcuts | A custom keyboard shortcut consists of one or more modifier keys (**Ctrl**, **Shift**, **Alt**, or any combination thereof) and a character key or function key.| Button('button1').keyboardShortcut('a',[ModifierKey.CTRL]) | +| Setting one custom keyboard shortcut for multiple components | Only the first component in the component tree responds to the custom keyboard shortcut. | Button('button1').keyboardShortcut('a',[ModifierKey.CTRL])
Button('button2').keyboardShortcut('a',[ModifierKey.CTRL]) | +| When the component is focused or not | The component responds to the custom keyboard shortcut as long as the window is focused. | – | +| When a single keyboard shortcut is set, it can be canceled by setting the **value**, **keys**, or both of them to null in the **keyboardShortcut** API.
When multiple keyboard shortcuts are set, they cannot be canceled.| Canceling the custom keyboard shortcut settings | Button('button1').keyboardShortcut('',[ModifierKey.CTRL])
Button('button2').keyboardShortcut('a',[l])
Button('button3').keyboardShortcut('',[]) | +| The independent pipeline sub-window and main window coexist | The focused window responds to the keyboard shortcut. | – | +| Ctrl, Shift, or Alt key in the **keys** parameter of the **keyboardShortcut** API| Both the keys on the left or right sides of the keyboard work. | Button('button1').keyboardShortcut('a',[ModifierKey.CTRL, ModifierKey.ALT]) | +| Character key in the **value** parameter of the **keyboardShortcut** API | The response is case-insensitive. | Button('button1').keyboardShortcut('a',[ModifierKey.CTRL])
Button('button2').keyboardShortcut('A',[ModifierKey.CTRL]) | +| Response to keyboard shortcuts | The component responds continuously to the keyboard shortcut when all the set keys are pressed. | – | +| Hidden component
| The keyboard shortcut also works. | – | +| Components in the disable state | The keyboard shortcut does not work. | – | +| 1. The keyboard shortcut is the same as an existing one (including the system-defined ones).
2. The **value** parameter contains multiple character keys.
3. The **key** parameter has a duplicate modifier key.| In these cases, the keyboard shortcut is not added, and the previously added keyboard shortcuts still work. | Button('button1').keyboardShortcut('c',[ModifierKey.CTRL])
Button('button2').keyboardShortcut('ab',[ModifierKey.CTRL])
Button('button3').keyboardShortcut('ab',[ModifierKey.CTRL,ModifierKey.CTRL]) | ## System-defined Keyboard Shortcuts -| Keyboard Shortcut | Component | -| -------------- | ------------------------------------------------------------ | +| Keyboard Shortcut | Component | +| -------------- | ---------------------------------------- | | Ctrl + C | [Image](ts-basic-components-image.md), [TextInput](ts-basic-components-textinput.md), [TextArea](ts-basic-components-textarea.md)| | Ctrl+ A | [TextInput](ts-basic-components-textinput.md), [TextArea](ts-basic-components-textarea.md)| | Ctrl+ V | [TextInput](ts-basic-components-textinput.md), [TextArea](ts-basic-components-textarea.md)| | Ctrl+ X | [TextInput](ts-basic-components-textinput.md), [TextArea](ts-basic-components-textarea.md)| -| Shift + arrow keys| [TextInput](ts-basic-components-textinput.md), [TextArea](ts-basic-components-textarea.md)| +| Shift + arrow keys | [TextInput](ts-basic-components-textinput.md), [TextArea](ts-basic-components-textarea.md)| | Ctrl+ Shift+ Z | [TextInput](ts-basic-components-textinput.md), [TextArea](ts-basic-components-textarea.md)| | Ctrl+ Z | [TextInput](ts-basic-components-textinput.md), [TextArea](ts-basic-components-textarea.md)| | Ctrl+ Y | [TextInput](ts-basic-components-textinput.md), [TextArea](ts-basic-components-textarea.md)| -| Arrow keys and Enter key| [TextInput](ts-basic-components-textinput.md), [TextArea](ts-basic-components-textarea.md)| -| Tab key | [TextInput](ts-basic-components-textinput.md), [TextArea](ts-basic-components-textarea.md)| +| Arrow keys and Enter key | [TextInput](ts-basic-components-textinput.md), [TextArea](ts-basic-components-textarea.md)| +| Tab key | [TextInput](ts-basic-components-textinput.md), [TextArea](ts-basic-components-textarea.md)| ## Example diff --git a/en/application-dev/ui/arkts-common-events-touch-screen-event.md b/en/application-dev/ui/arkts-common-events-touch-screen-event.md index 714632ca346c2c4c2af4a534ef74b87d70b9272c..8ea799215eba028933a83a571e0d45d22c113ca7 100644 --- a/en/application-dev/ui/arkts-common-events-touch-screen-event.md +++ b/en/application-dev/ui/arkts-common-events-touch-screen-event.md @@ -12,7 +12,7 @@ Touchscreen events are events triggered when a finger or stylus is placed on, mo ## Click Event -A click event is triggered when a complete press and lift action performed by using a finger or a stylus. When a click event occurs, the following callback is triggered: +A click event is triggered when a complete press and lift action is performed by using a finger or a stylus. When a click event occurs, the following callback is triggered: ```ts onClick(event: (event?: ClickEvent) => void) diff --git a/en/application-dev/ui/arkts-drawing-customization-on-canvas.md b/en/application-dev/ui/arkts-drawing-customization-on-canvas.md index 7e0e1f79da9c0f26c210a939a54586a09f083832..93b8e8f114dc32163bbf2859710b85c0e681bf2c 100644 --- a/en/application-dev/ui/arkts-drawing-customization-on-canvas.md +++ b/en/application-dev/ui/arkts-drawing-customization-on-canvas.md @@ -89,11 +89,7 @@ You can draw custom graphics on the canvas in any of the following ways: import lottie from '@ohos/lottie' ``` - For details about the APIs, see [Lottie](../reference/arkui-ts/ts-components-canvas-lottie.md). - - >**NOTE** - > - >Before using Lottie for the first time, run the **ohpm install \@ohos/lottieETS** command in the Terminal window to download Lottie. + For details about the APIs, see [Lottie](https://gitee.com/openharmony-tpc/lottieETS). ## Initializing the Canvas Component @@ -117,7 +113,7 @@ Canvas(this.context) ## Canvas Component Drawing Modes -Two modes are available for drawing with the **Canvas** component: +Two modes are available for drawing with the **Canvas** component: - After the **onReady()** callback of the **Canvas** component is invoked, use the **CanvasRenderingContext2D** and **OffscreenCanvasRenderingContext2D** objects to call related APIs for drawing. @@ -159,9 +155,8 @@ Two modes are available for drawing with the **Canvas** component: - Draw a basic shape. - -You can draw a basic shape by calling APIs such as [arc](../reference/arkui-ts/ts-canvasrenderingcontext2d.md#arc), [ellipse](../reference/arkui-ts/ts-canvasrenderingcontext2d.md#ellipse), and [rect](../reference/arkui-ts/ts-canvasrenderingcontext2d.md#rect). - + You can draw a basic shape by calling APIs such as [arc](../reference/arkui-ts/ts-canvasrenderingcontext2d.md#arc), [ellipse](../reference/arkui-ts/ts-canvasrenderingcontext2d.md#ellipse), and [rect](../reference/arkui-ts/ts-canvasrenderingcontext2d.md#rect). + ```ts Canvas(this.context) .width('100%') @@ -183,9 +178,9 @@ You can draw a basic shape by calling APIs such as [arc](../reference/arkui-ts/t }) ``` - + ![2023022794521(1)](figures/2023022794521(1).jpg) - + - Draw text. You can use APIs such as [fillText](../reference/arkui-ts/ts-canvasrenderingcontext2d.md#filltext) and [strokeText](../reference/arkui-ts/ts-canvasrenderingcontext2d.md#stroketext) to draw text. @@ -345,4 +340,3 @@ You can draw a basic shape by calling APIs such as [arc](../reference/arkui-ts/t ``` ![2023032422159](figures/2023032422159.jpg) - diff --git a/en/application-dev/ui/arkts-event-overview.md b/en/application-dev/ui/arkts-event-overview.md index b12ad179de90e821c1b61226e02469a289f67d6a..621bb32a1cf96eaf90dea0bd2f1b01dd1aa1e89f 100644 --- a/en/application-dev/ui/arkts-event-overview.md +++ b/en/application-dev/ui/arkts-event-overview.md @@ -1,23 +1,23 @@ -# Event Overview +# Interaction Event Overview -Interaction events are classified into touchscreen events, keyboard and mouse events, and focus events based on trigger types. +Interaction events are classified based on trigger types into touchscreen events, keyboard and mouse events, and focus events. -- [Touchscreen event](arkts-common-events-touch-screen-event.md): single-finger or single-stroke operation performed by a finger or stylus on the touchscreen. +- [Touchscreen event](arkts-common-events-touch-screen-event.md): an event triggered by the operation performed a finger or stylus on the touchscreen. -- [Keyboard and mouse event](arkts-common-events-device-input-event.md): includes operation events of the peripheral mouse or touchpad and key events of the peripheral keyboard. - - The mouse event refers to an event responded to when an operation is performed with a peripheral mouse/touchpad. - - The key event refer to an event responded to when an operation is performed with a peripheral keyboard. +- [Keyboard and mouse event](arkts-common-events-device-input-event.md): an event triggered by an operation performed on a peripheral mouse, touchpad, or keyboard. + - The mouse event refers to an event responded to when an operation is performed with a peripheral mouse or touchpad. + - The keyboard event refera to an event responded to when an operation is performed with a peripheral keyboard. -- [Focus event](arkts-common-events-focus-event.md): controls the focusability and response events of the component in the preceding ways. +- [Focus event](arkts-common-events-focus-event.md): an event triggered when a component receives or loses focus. -The gesture event includes the gesture binding method and the bound gesture. The bound gesture may be classified into two types: a single gesture and a combined gesture, and is distinguished according to complexity of the gesture. +The gesture event includes the gesture binding method and the bound gesture – a single or combined gesture. -- [Gesture binding](arkts-gesture-events-binding.md): binds a single gesture or a combination of gestures to a component and declares the response priority of the bound gesture. +- [Gesture binding method](arkts-gesture-events-binding.md): a method that binds a single or combined gesture to a component and declares the response priority of the bound gesture. -- [Single gesture](arkts-gesture-events-single-gesture.md): basic unit of a gesture, which is a part of all complex gestures. +- [Single gesture](arkts-gesture-events-single-gesture.md): basic unit of gestures, which is a part of all complex gestures. -- [Combined gesture](arkts-gesture-events-combined-gestures.md): a combination of multiple single gestures. Multiple single gestures can be combined into a combined gesture according to a declared type and a certain rule, and the combined gesture can be used. +- [Combined gesture](arkts-gesture-events-combined-gestures.md): a combination of single gestures brought together according to a declared type and a certain rule.