diff --git a/en/application-dev/reference/apis/Readme-EN.md b/en/application-dev/reference/apis/Readme-EN.md index bed5c71f81b43a5ba8012b2c8eb2d9e8d41ce2b3..4a0e652f313a0f1690c2d144f8d637412d44c914 100644 --- a/en/application-dev/reference/apis/Readme-EN.md +++ b/en/application-dev/reference/apis/Readme-EN.md @@ -68,6 +68,9 @@ - bundle/[HapModuleInfo](js-apis-bundle-HapModuleInfo.md) - bundle/[Metadata](js-apis-bundle-Metadata.md) - bundle/[ModuleInfo](js-apis-bundle-ModuleInfo.md) +- Application Management + + - [@system.package](js-apis-system-package.md) - UI Page - [@ohos.animator](js-apis-animator.md) @@ -234,7 +237,6 @@ - [@system.mediaquery](js-apis-system-mediaquery.md) - [@system.network](js-apis-system-network.md) - [@system.notification](js-apis-system-notification.md) - - [@system.package](js-apis-system-package.md) - [@system.prompt](js-apis-system-prompt.md) - [@system.request](js-apis-system-request.md) - [@system.router](js-apis-system-router.md) diff --git a/en/application-dev/reference/apis/js-apis-inputmethodengine.md b/en/application-dev/reference/apis/js-apis-inputmethodengine.md index 5ad3a192a82939747f94ec7aeefc4c5baea7d0aa..efd36ed3799a5ce4ad4238369a4ce2f9e4846c4c 100644 --- a/en/application-dev/reference/apis/js-apis-inputmethodengine.md +++ b/en/application-dev/reference/apis/js-apis-inputmethodengine.md @@ -6,7 +6,7 @@ ## Modules to Import -``` +```js import inputMethodEngine from '@ohos.inputmethodengine'; ``` @@ -14,44 +14,44 @@ import inputMethodEngine from '@ohos.inputmethodengine'; Defines constant values. -**System capability**: SystemCapability.MiscServices.InputMethodFramework +**System capability**: SystemCapability.Miscservices.InputMethodFramework | Name| Type| Readable| Writable| Description| -| -------- | -------- | -------- | -------- | -------- | -| ENTER_KEY_TYPE_UNSPECIFIED | number | Yes| No| No function is specified for the Enter key.| -| ENTER_KEY_TYPE_GO | number | Yes| No| The Enter key takes the user to the target.| -| ENTER_KEY_TYPE_SEARCH | number | Yes| No| The Enter key takes the user to the results of their searching.| -| ENTER_KEY_TYPE_SEND | number | Yes| No| The Enter key sends the text to its target.| -| ENTER_KEY_TYPE_NEXT | number | Yes| No| The Enter key takes the user to the next field.| -| ENTER_KEY_TYPE_DONE | number | Yes| No| The Enter key takes the user to the next line.| -| ENTER_KEY_TYPE_PREVIOUS | number | Yes| No| The Enter key takes the user to the previous field.| -| PATTERN_NULL | number | Yes| No| Any type of edit box.| -| PATTERN_TEXT | number | Yes| No| Text edit box.| -| PATTERN_NUMBER | number | Yes| No| Number edit box.| -| PATTERN_PHONE | number | Yes| No| Phone number edit box.| -| PATTERN_DATETIME | number | Yes| No| Date edit box.| -| PATTERN_EMAIL | number | Yes| No| Email edit box.| -| PATTERN_URI | number | Yes| No| URI edit box.| -| PATTERN_PASSWORD | number | Yes| No| Password edit box.| -| OPTION_ASCII | number | Yes| No| ASCII values are allowed.| -| OPTION_NONE | number | Yes| No| No input attribute is specified.| -| OPTION_AUTO_CAP_CHARACTERS | number | Yes| No| Characters are allowed.| -| OPTION_AUTO_CAP_SENTENCES | number | Yes| No| Sentences are allowed.| -| OPTION_AUTO_WORDS | number | Yes| No| Words are allowed.| -| OPTION_MULTI_LINE | number | Yes| No| Multiple lines are allowed.| -| OPTION_NO_FULLSCREEN | number | Yes| No| Half-screen style.| -| FLAG_SELECTING | number | Yes| No| The edit box is being selected.| -| FLAG_SINGLE_LINE | number | Yes| No| The edit box allows only single-line input.| -| DISPLAY_MODE_PART | number | Yes| No| The edit box is displayed in half-screen mode.| -| DISPLAY_MODE_FULL | number | Yes| No| The edit box is displayed in full screen.| - -## inputMethodEngine.getInputMethodEngine +| -------------------- | -------- | ---- | ---- | ------------------- | +| ENTER_KEY_TYPE_UNSPECIFIED | number | Yes | No | No function is specified for the Enter key.| +| ENTER_KEY_TYPE_GO | number | Yes | No | The Enter key takes the user to the target.| +| ENTER_KEY_TYPE_SEARCH | number | Yes | No | The Enter key takes the user to the results of their searching.| +| ENTER_KEY_TYPE_SEND | number | Yes | No | The Enter key sends the text to its target.| +| ENTER_KEY_TYPE_NEXT | number | Yes | No | The Enter key takes the user to the next field.| +| ENTER_KEY_TYPE_DONE | number | Yes | No | The Enter key takes the user to the next line.| +| ENTER_KEY_TYPE_PREVIOUS | number | Yes | No | The Enter key takes the user to the previous field.| +| PATTERN_NULL | number | Yes | No | Any type of edit box.| +| PATTERN_TEXT | number | Yes | No | Text edit box.| +| PATTERN_NUMBER | number | Yes | No | Number edit box.| +| PATTERN_PHONE | number | Yes | No | Phone number edit box.| +| PATTERN_DATETIME | number | Yes | No | Date edit box.| +| PATTERN_EMAIL | number | Yes | No | Email edit box.| +| PATTERN_URI | number | Yes | No | URI edit box.| +| PATTERN_PASSWORD | number | Yes | No | Password edit box.| +| OPTION_ASCII | number | Yes | No | ASCII values are allowed.| +| OPTION_NONE | number | Yes | No | No input attribute is specified.| +| OPTION_AUTO_CAP_CHARACTERS | number | Yes | No | Characters are allowed.| +| OPTION_AUTO_CAP_SENTENCES | number | Yes | No | Sentences are allowed.| +| OPTION_AUTO_WORDS | number | Yes | No | Words are allowed.| +| OPTION_MULTI_LINE | number | Yes | No | Multiple lines are allowed.| +| OPTION_NO_FULLSCREEN | number | Yes | No | Half-screen style.| +| FLAG_SELECTING | number | Yes | No | The edit box is being selected.| +| FLAG_SINGLE_LINE | number | Yes | No | The edit box allows only single-line input.| +| DISPLAY_MODE_PART | number | Yes | No | The edit box is displayed in half-screen mode.| +| DISPLAY_MODE_FULL | number | Yes | No | The edit box is displayed in full screen.| + +## inputMethodEngine.getInputMethodEngine getInputMethodEngine(): InputMethodEngine Obtains an **InputMethodEngine** instance. -**System capability**: SystemCapability.MiscServices.InputMethodFramework +**System capability**: SystemCapability.Miscservices.InputMethodFramework **Return value** @@ -62,16 +62,16 @@ Obtains an **InputMethodEngine** instance. **Example** ```js -var InputMethodEngine = inputMethodEngine.getInputMethodEngine(); +let InputMethodEngine = inputMethodEngine.getInputMethodEngine(); ``` -## inputMethodEngine.createKeyboardDelegate +## inputMethodEngine.createKeyboardDelegate createKeyboardDelegate(): KeyboardDelegate Obtains a **KeyboardDelegate** instance. -**System capability**: SystemCapability.MiscServices.InputMethodFramework +**System capability**: SystemCapability.Miscservices.InputMethodFramework **Return value** @@ -82,20 +82,20 @@ Obtains a **KeyboardDelegate** instance. **Example** ```js -var KeyboardDelegate = inputMethodEngine.createKeyboardDelegate(); +let KeyboardDelegate = inputMethodEngine.createKeyboardDelegate(); ``` -## InputMethodEngine +## InputMethodEngine In the following API examples, you must first use [getInputMethodEngine](#getInputMethodEngine) to obtain an **InputMethodEngine** instance, and then call the APIs using the obtained instance. -### on('inputStart') +### on('inputStart') on(type: 'inputStart', callback: (kbController: KeyboardController, textInputClient: TextInputClient) => void): void Listens for the input method binding event. This API uses a callback to return the result. -**System capability**: SystemCapability.MiscServices.InputMethodFramework +**System capability**: SystemCapability.Miscservices.InputMethodFramework **Parameters** @@ -119,7 +119,7 @@ off(type: 'inputStart', callback?: (kbController: KeyboardController, textInputC Cancels listening for the input method binding event. -**System capability**: SystemCapability.MiscServices.InputMethodFramework +**System capability**: SystemCapability.Miscservices.InputMethodFramework **Parameters** @@ -140,7 +140,7 @@ on(type: 'keyboardShow'|'keyboardHide', callback: () => void): void Listens for an input method event. -**System capability**: SystemCapability.MiscServices.InputMethodFramework +**System capability**: SystemCapability.Miscservices.InputMethodFramework **Parameters** @@ -163,7 +163,7 @@ off(type: 'keyboardShow'|'keyboardHide', callback?: () => void): void Cancels listening for an input method event. -**System capability**: SystemCapability.MiscServices.InputMethodFramework +**System capability**: SystemCapability.Miscservices.InputMethodFramework **Parameters** @@ -178,7 +178,7 @@ Cancels listening for an input method event. InputMethodEngine.off('keyboardShow'); ``` -## KeyboardDelegate +## KeyboardDelegate In the following API examples, you must first use [createKeyboardDelegate](#createKeyboardDelegate) to obtain a **KeyboardDelegate** instance, and then call the APIs using the obtained instance. @@ -188,7 +188,7 @@ on(type: 'keyDown'|'keyUp', callback: (event: KeyEvent) => boolean): void Listens for a hard keyboard even. This API uses a callback to return the key information. -**System capability**: SystemCapability.MiscServices.InputMethodFramework +**System capability**: SystemCapability.Miscservices.InputMethodFramework **Parameters** @@ -211,7 +211,7 @@ off(type: 'keyDown'|'keyUp', callback?: (event: KeyEvent) => boolean): void Cancels listening for a hard keyboard even. -**System capability**: SystemCapability.MiscServices.InputMethodFramework +**System capability**: SystemCapability.Miscservices.InputMethodFramework **Parameters** @@ -232,7 +232,7 @@ on(type: 'cursorContextChange', callback: (x: number, y:number, height:number) = Listens for cursor context changes. This API uses a callback to return the cursor information. -**System capability**: SystemCapability.MiscServices.InputMethodFramework +**System capability**: SystemCapability.Miscservices.InputMethodFramework **Parameters** @@ -255,7 +255,7 @@ off(type: 'cursorContextChange', callback?: (x: number, y:number, height:number) Cancels listening for cursor context changes. -**System capability**: SystemCapability.MiscServices.InputMethodFramework +**System capability**: SystemCapability.Miscservices.InputMethodFramework **Parameters** @@ -276,7 +276,7 @@ on(type: 'selectionChange', callback: (oldBegin: number, oldEnd: number, newBegi Listens for text selection changes. This API uses a callback to return the text selection information. -**System capability**: SystemCapability.MiscServices.InputMethodFramework +**System capability**: SystemCapability.Miscservices.InputMethodFramework **Parameters** @@ -299,7 +299,7 @@ off(type: 'selectionChange', callback?: (oldBegin: number, oldEnd: number, newBe Cancels listening for text selection changes. -**System capability**: SystemCapability.MiscServices.InputMethodFramework +**System capability**: SystemCapability.Miscservices.InputMethodFramework **Parameters** @@ -321,7 +321,7 @@ on(type: 'textChange', callback: (text: string) => void): void Listens for text changes. This API uses a callback to return the current text content. -**System capability**: SystemCapability.MiscServices.InputMethodFramework +**System capability**: SystemCapability.Miscservices.InputMethodFramework **Parameters** @@ -359,7 +359,7 @@ Cancels listening for text changes. KeyboardDelegate.off('textChange'); ``` -## KeyboardController +## KeyboardController In the following API examples, you must first use [inputStart](#inputStart) to obtain a **KeyboardController** instance, and then call the APIs using the obtained instance. @@ -369,7 +369,7 @@ hideKeyboard(callback: AsyncCallback<void>): void Hides the keyboard. This API uses an asynchronous callback to return the result. -**System capability**: SystemCapability.MiscServices.InputMethodFramework +**System capability**: SystemCapability.Miscservices.InputMethodFramework **Parameters** @@ -379,10 +379,9 @@ Hides the keyboard. This API uses an asynchronous callback to return the result. **Example** - ```js - KeyboardController.hideKeyboard(()=>{ - }); +KeyboardController.hideKeyboard(()=>{ +}); ``` ### hideKeyboard @@ -395,18 +394,17 @@ Hides the keyboard. This API uses a promise to return the result. **Return value** -| Type | Description: | +| Type | Description | | ---------------- | -------- | | Promise<void> | Promise used to return the result.| **Example** - ```js - KeyboardController.hideKeyboard(); +KeyboardController.hideKeyboard(); ``` -## TextInputClient +## TextInputClient In the following API examples, you must first use [inputStart](#inputStart) to obtain a **TextInputClient** instance, and then call the APIs using the obtained instance. @@ -416,7 +414,7 @@ getForward(length:number, callback: AsyncCallback<string>): void Obtains the specific-length text before the cursor. This API uses an asynchronous callback to return the result. -**System capability**: SystemCapability.MiscServices.InputMethodFramework +**System capability**: SystemCapability.Miscservices.InputMethodFramework **Parameters** @@ -428,9 +426,9 @@ Obtains the specific-length text before the cursor. This API uses an asynchronou **Example** ```js - TextInputClient.getForward(5,(text) =>{ - console.info("text = " + text); - }); +TextInputClient.getForward(5,(text) =>{ + console.info("text = " + text); +}); ``` ### getForward @@ -439,7 +437,7 @@ getForward(length:number): Promise<string> Obtains the specific-length text before the cursor. This API uses a promise to return the result. -**System capability**: SystemCapability.MiscServices.InputMethodFramework +**System capability**: SystemCapability.Miscservices.InputMethodFramework **Parameters** @@ -456,8 +454,8 @@ Obtains the specific-length text before the cursor. This API uses a promise to r **Example** ```js - var text = TextInputClient.getForward(5); - console.info("text = " + text); +let text = TextInputClient.getForward(5); +console.info("text = " + text); ``` ### getBackward @@ -466,7 +464,7 @@ getBackward(length:number, callback: AsyncCallback<string>): void Obtains the specific-length text after the cursor. This API uses an asynchronous callback to return the result. -**System capability**: SystemCapability.MiscServices.InputMethodFramework +**System capability**: SystemCapability.Miscservices.InputMethodFramework **Parameters** @@ -478,8 +476,8 @@ Obtains the specific-length text after the cursor. This API uses an asynchronous **Example** ```js - TextInputClient.getBackward(5,(text)=>{ - console.info("text = " + text); +TextInputClient.getBackward(5,(text)=>{ + console.info("text = " + text); }); ``` @@ -489,7 +487,7 @@ getBackward(length:number): Promise<string> Obtains the specific-length text after the cursor. This API uses a promise to return the result. -**System capability**: SystemCapability.MiscServices.InputMethodFramework +**System capability**: SystemCapability.Miscservices.InputMethodFramework **Parameters** @@ -506,8 +504,8 @@ Obtains the specific-length text after the cursor. This API uses a promise to re **Example** ```js - var text = TextInputClient.getBackward(5); - console.info("text = " + text); +let text = TextInputClient.getBackward(5); +console.info("text = " + text); ``` ### deleteForward @@ -516,7 +514,7 @@ deleteForward(length:number, callback: AsyncCallback<boolean>): void Deletes the fixed-length text before the cursor. This API uses an asynchronous callback to return the result. -**System capability**: SystemCapability.MiscServices.InputMethodFramework +**System capability**: SystemCapability.Miscservices.InputMethodFramework **Parameters** @@ -529,7 +527,7 @@ Deletes the fixed-length text before the cursor. This API uses an asynchronous c ```js TextInputClient.deleteForward(5,(isSuccess)=>{ - console.info("isSuccess = " + isSuccess); + console.info("isSuccess = " + isSuccess); }); ``` @@ -539,7 +537,7 @@ deleteForward(length:number): Promise<boolean> Deletes the fixed-length text before the cursor. This API uses a promise to return the result. -**System capability**: SystemCapability.MiscServices.InputMethodFramework +**System capability**: SystemCapability.Miscservices.InputMethodFramework **Parameters** @@ -556,8 +554,8 @@ Deletes the fixed-length text before the cursor. This API uses a promise to retu **Example** ```js - var isSuccess = TextInputClient.deleteForward(5); - console.info("isSuccess = " + isSuccess); +let isSuccess = TextInputClient.deleteForward(5); +console.info("isSuccess = " + isSuccess); ``` ### deleteBackward @@ -566,7 +564,7 @@ deleteBackward(length:number, callback: AsyncCallback<boolean>): void Deletes the fixed-length text after the cursor. This API uses an asynchronous callback to return the result. -**System capability**: SystemCapability.MiscServices.InputMethodFramework +**System capability**: SystemCapability.Miscservices.InputMethodFramework **Parameters** @@ -578,8 +576,8 @@ Deletes the fixed-length text after the cursor. This API uses an asynchronous ca **Example** ```js - TextInputClient.deleteBackward(5, (isSuccess)=>{ - console.info("isSuccess = " + isSuccess); +TextInputClient.deleteBackward(5, (isSuccess)=>{ + console.info("isSuccess = " + isSuccess); }); ``` @@ -606,7 +604,7 @@ Deletes the fixed-length text after the cursor. This API uses a promise to retur **Example** ```js -var isSuccess = TextInputClient.deleteBackward(5); +let isSuccess = TextInputClient.deleteBackward(5); console.info("isSuccess = " + isSuccess); ``` @@ -616,7 +614,7 @@ sendKeyFunction(action:number, callback: AsyncCallback<boolean>): void Sets the Enter key to send the text to its target. This API uses an asynchronous callback to return the result. -**System capability**: SystemCapability.MiscServices.InputMethodFramework +**System capability**: SystemCapability.Miscservices.InputMethodFramework **Parameters** @@ -628,8 +626,8 @@ Sets the Enter key to send the text to its target. This API uses an asynchronous **Example** ```js - TextInputClient.sendKeyFunction(inputMethod.ENTER_KEY_TYPE_NEXT,(isSuccess)=>{ - console.info("isSuccess = " + isSuccess); +TextInputClient.sendKeyFunction(inputMethod.ENTER_KEY_TYPE_NEXT,(isSuccess)=>{ + console.info("isSuccess = " + isSuccess); }); ``` @@ -639,7 +637,7 @@ sendKeyFunction(action:number): Promise<boolean> Sets the Enter key to send the text to its target. This API uses a promise to return the result. -**System capability**: SystemCapability.MiscServices.InputMethodFramework +**System capability**: SystemCapability.Miscservices.InputMethodFramework **Parameters** @@ -656,7 +654,7 @@ Sets the Enter key to send the text to its target. This API uses a promise to re **Example** ```js -var isSuccess = TextInputClient.sendKeyFunction(inputMethod.ENTER_KEY_TYPE_NEXT); +let isSuccess = TextInputClient.sendKeyFunction(inputMethod.ENTER_KEY_TYPE_NEXT); console.info("isSuccess = " + isSuccess); ``` @@ -679,7 +677,7 @@ Inserts text. This API uses an asynchronous callback to return the result. ```js TextInputClient.insertText("test", (isSuccess)=>{ - console.info("isSuccess = " + isSuccess); + console.info("isSuccess = " + isSuccess); }); ``` @@ -689,7 +687,7 @@ insertText(text:string): Promise<boolean> Inserts text. This API uses a promise to return the result. -**System capability**: SystemCapability.MiscServices.InputMethodFramework +**System capability**: SystemCapability.Miscservices.InputMethodFramework **Parameters** @@ -706,7 +704,7 @@ Inserts text. This API uses a promise to return the result. **Example** ```js -var isSuccess = TextInputClient.insertText("test"); +let isSuccess = TextInputClient.insertText("test"); console.info("isSuccess = " + isSuccess); ``` @@ -716,7 +714,7 @@ getEditorAttribute(callback: AsyncCallback<EditorAttribute>): void Obtains the attribute of the edit box. This API uses an asynchronous callback to return the result. -**System capability**: SystemCapability.MiscServices.InputMethodFramework +**System capability**: SystemCapability.Miscservices.InputMethodFramework **Parameters** @@ -727,8 +725,8 @@ Obtains the attribute of the edit box. This API uses an asynchronous callback to **Example** ```js - TextInputClient.getEditorAttribute((EditorAttribute)=>{ - }); +TextInputClient.getEditorAttribute((EditorAttribute)=>{ +}); ``` ### getEditorAttribute @@ -737,7 +735,7 @@ getEditorAttribute(): Promise<EditorAttribute> Obtains the attribute of the edit box. This API uses a promise to return the result. -**System capability**: SystemCapability.MiscServices.InputMethodFramework +**System capability**: SystemCapability.Miscservices.InputMethodFramework **Return value** @@ -748,25 +746,25 @@ Obtains the attribute of the edit box. This API uses a promise to return the res **Example** ```js -var EditorAttribute = TextInputClient.getEditorAttribute(); +let EditorAttribute = TextInputClient.getEditorAttribute(); ``` -## EditorAttribute +## EditorAttribute Describes the attribute of the edit box. -**System capability**: SystemCapability.MiscServices.InputMethodFramework +**System capability**: SystemCapability.Miscservices.InputMethodFramework | Name | Type| Readable| Writable| Description | | ------------ | -------- | ---- | ---- | ------------------ | | enterKeyType | number | Yes | No | Function attribute of the edit box.| | inputPattern | number | Yes | No | Text attribute of the edit box.| -## KeyEvent +## KeyEvent Describes the attribute of a key. -**System capability**: SystemCapability.MiscServices.InputMethodFramework +**System capability**: SystemCapability.Miscservices.InputMethodFramework | Name | Type| Readable| Writable| Description | | --------- | -------- | ---- | ---- | ------------ | diff --git a/en/application-dev/reference/apis/js-apis-system-package.md b/en/application-dev/reference/apis/js-apis-system-package.md index c6453ec28f1dca4749d8f8c91414a609af161466..6b4debcb0247d065943bc9f27ca63206c3627ea9 100644 --- a/en/application-dev/reference/apis/js-apis-system-package.md +++ b/en/application-dev/reference/apis/js-apis-system-package.md @@ -1,11 +1,9 @@ # Application Management -> ![icon-note.gif](public_sys-resources/icon-note.gif) **Noteļ¼š** +> **NOTE** > -> - The APIs of this module are no longer maintained since API version 7. It is recommended that you use [`@ohos.bundle`](js-apis-Bundle.md) instead. -> -> - The initial APIs of this module are supported since API version 3. 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 3. Newly added APIs will be marked with a superscript to indicate their earliest API version. ## Modules to Import @@ -26,20 +24,20 @@ Checks whether an application exists, or whether a native application has been i **System capability**: SystemCapability.BundleManager.BundleFramework -**Parameter** +**Parameters** | Name | Type | Mandatory | Description | | -------- | -------- | -------- | -------- | -| bundleName | string | Yes | Application bundle name | -| success | Function | No | Called when the check result is obtained | -| fail | Function | No | Called when the check result fails to be obtained | -| complete | Function | No | Called when the execution is complete | +| bundleName | string | Yes | Application bundle name. | +| success | Function | No | Called when the check result is obtained. | +| fail | Function | No | Called when the check result fails to be obtained. | +| complete | Function | No | Called when the execution is complete. | The following value will be returned when the check result is obtained. | Name | Type | Description | | -------- | -------- | -------- | -| result | boolean | Whether the application exists, or whether the native application has been installed | +| result | boolean | The value **true** means that the application exists or the native application has been installed, and **false** means the opposite. | **Example** diff --git a/en/application-dev/reference/apis/js-apis-uitest.md b/en/application-dev/reference/apis/js-apis-uitest.md index 147cbb7c36120e4ffca27ac710915d683bee1ee4..8d47b373d7f316656e03e3fc579e61564663b7ad 100644 --- a/en/application-dev/reference/apis/js-apis-uitest.md +++ b/en/application-dev/reference/apis/js-apis-uitest.md @@ -19,6 +19,20 @@ This module provides the following functions: import {UiDriver,BY,MatchPattern} from '@ohos.uitest' ``` +## MatchPattern + +Enumerates the match patterns supported for component attributes. + +**System capability**: SystemCapability.Test.UiTest + +| Name | Value | Description | +| ----------- | ---- | -------------- | +| EQUALS | 0 | Equal to the given value. | +| CONTAINS | 1 | Contains the given value. | +| STARTS_WITH | 2 | Starts with the given value.| +| ENDS_WITH | 3 | Ends with the given value.| + + ## By The UiTest framework provides a wide range of UI component feature description APIs in the **By** class to filter and match components. @@ -978,16 +992,3 @@ async function demo() { } ``` - -## MatchPattern - -Enumerates the match patterns supported for component attributes. - -**System capability**: SystemCapability.Test.UiTest - -| Name | Value | Description | -| ----------- | ---- | -------------- | -| EQUALS | 0 | Equal to the given value. | -| CONTAINS | 1 | Containing the given value. | -| STARTS_WITH | 2 | Starting from the given value.| -| ENDS_WITH | 3 | Ending with the given value.| diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_000000117726526811.png b/en/application-dev/reference/arkui-js/figures/en-us_image_000000117726526811.png new file mode 100644 index 0000000000000000000000000000000000000000..d9d9a17fe607c8acc99d3a7e26c6b4316e0b7f5b Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_000000117726526811.png differ diff --git a/en/application-dev/reference/arkui-js/figures/figures1.png b/en/application-dev/reference/arkui-js/figures/figures1.png deleted file mode 100644 index 2ed837e111c3ac1ba1eafb5b28da581ef4de5d22..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-js/figures/figures1.png and /dev/null differ diff --git a/en/application-dev/reference/arkui-js/js-components-container-badge.md b/en/application-dev/reference/arkui-js/js-components-container-badge.md index 994f5e0d598267b88f791aaf160b3a315d219c3b..cce7ddc8f052523c4f4e3bb82348196674edd788 100644 --- a/en/application-dev/reference/arkui-js/js-components-container-badge.md +++ b/en/application-dev/reference/arkui-js/js-components-container-badge.md @@ -1,60 +1,71 @@ # badge -The **<badge>** component is used to mark new events that require user attention in your application. +> **NOTE** +> +> This component is supported since API version 5. Updates will be marked with a superscript to indicate their earliest API version. + +The **\** component is used to mark new events that require user attention in your application. + ## Required Permissions None + ## Child Components This component supports only one child component. -> ![img](public_sys-resources/icon-note.gif) **NOTE:** If multiple child components are used, only the first one takes effect by default. - -## Attributes +> **NOTE** +> +> If multiple child components are used, only the first one takes effect by default. -In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. +## Attributes +In addition to the [universal attributes](js-components-common-attributes.md), the following attributes are supported. -| Name | Type | Default Value | Mandatory | Description | -| --------- | ------------------------------------------------------------ | ------------- | --------- | ------------------------------------------------------------ | -| placement | string | rightTop | No | Position of a number or dot badge. Available values are as follows:
- **right**: on the right border of the component.
- **rightTop**: in the upper right corner of the component border.
- **left**: on the left border of the component. | -| count | number | 0 | No | Number of notifications displayed via the badge. The default value is **0**. If the number of notifications is greater than 0, the badge changes from a dot to the number. If this attribute is not set or the value is less than or equal to 0, the badge is a dot.
**NOTE:** When the **count** value is greater than the **maxcount** value, maxcount+ is displayed.
The largest integer value supported for **count** is **2147483647**. | -| visible | boolean | false | No | Whether to display the badge. The value **true** means that the badge shows up when a new notification is received. To use a number badge, set the **count** attribute. | -| maxcount | number | 99 | No | Maximum number of notifications. When the number of new notifications exceeds the value of this attribute, *maxcount***+** is displayed, for example, **99+**.
**NOTE:** The largest integer value supported for **maxcount** is **2147483647**. | -| config | BadgeConfig | - | No | Configuration of the badge. | -| label6+ | string | - | No | Text of the new notification displayed via the badge.
**NOTE:** When this attribute is set, attributes **count** and **maxcount** do not take effect. | +| Name | Type | Default Value | Mandatory| Description | +| ------------------ | ----------- | -------- | ---- | ------------------------------------------------------------ | +| placement | string | rightTop | No | Position of a number or dot badge. Available values are as follows:
- **right**: on the right border of the component.
- **rightTop**: in the upper right corner of the component border.
- **left**: on the left border of the component.| +| count | number | 0 | No | Number of notifications displayed via the badge. If the value is 0 (default value), the badge is not displayed. If the value is greater than 0, the badge is a number badge.
When the **count** value is greater than the **maxcount** value, *maxcount***+** is displayed. The largest integer value supported for **count** is **2147483647**.| +| visible | boolean | false | No | Whether to display the badge. The value **true** means that the badge shows up when a new notification is received. To use a number badge, also set the **count** attribute.| +| maxcount | number | 99 | No | Maximum number of notifications. When the number of new notifications exceeds the value of this attribute, *maxcount***+** is displayed, for example, **99+**.
The largest integer value supported for **maxcount** is **2147483647**.| +| config | BadgeConfig | - | No | Configuration of the badge. | +| label6+ | string | - | No | Text of the new notification displayed via the badge.
When this attribute is set, attributes **count** and **maxcount** do not take effect.| **Table 1** BadgeConfig +| Name | Type | Default Value | Mandatory | Description | +| ---------- | -------------- | -------- | ---- | ------------ | +| badgeColor | <color> | \#fa2a2d | No | Background color of the badge. | +| textColor | <color> | \#ffffff | No | Text color of the number badge.| +| textSize | <length> | 10px | No | Text size of the number badge.| +| badgeSize | <length> | 6px | No | Default size of the dot badge. | -| Name | Type | Default Value | Mandatory | Description | -| ---------- | -------------- | ------------- | --------- | ------------------------------- | -| badgeColor | <color> | #fa2a2d | No | Background color of the badge. | -| textColor | <color> | #ffffff | No | Text color of the number badge. | -| textSize | <length> | 10px | No | Text size of the number badge. | -| badgeSize | <length> | 6px | No | Default size of the dot badge. | - ## Styles -Styles in [Universal Styles](js-components-common-styles.md) are supported. +The [universal styles](../arkui-js/js-components-common-styles.md) are supported. + +> **NOTE** +> +> The total size of child components must be smaller than or equal to that of the **\** component. Otherwise, the child components cannot be displayed. -> ![img](public_sys-resources/icon-note.gif) **NOTE:** The total size of child components must be smaller than or equal to that of the **<badge>** component. Otherwise, the child components cannot be displayed. ## Events -Events in [Universal Events](js-components-common-events.md) are supported. +The [universal events](../arkui-js/js-components-common-events.md) are supported. + ## Methods -Methods in [Universal Methods](js-components-common-methods.md) are supported. +The [universal methods](../arkui-js/js-components-common-methods.md) are supported. + ## Example -``` +```html
@@ -64,6 +75,9 @@ Methods in [Universal Methods](js-components-common-methods.md) are supported. example
+``` + +```css /* xxx.css */ .container { flex-direction: column; @@ -82,6 +96,9 @@ Methods in [Universal Methods](js-components-common-methods.md) are supported. background-color: #46b1e3; font-size: 50px; } +``` + +```js // xxx.js export default { data:{ @@ -93,4 +110,4 @@ export default { } ``` -![img](figures/figures1.png) \ No newline at end of file +![en-us_image_000000117726526811](figures/en-us_image_000000117726526811.png) diff --git a/en/application-dev/reference/arkui-js/js-components-container-tabs.md b/en/application-dev/reference/arkui-js/js-components-container-tabs.md index 674f7f83660e8b27e92ce3b72870abc013afa983..02613285ab846edda7934c852bd1a5cb3400dcf7 100644 --- a/en/application-dev/reference/arkui-js/js-components-container-tabs.md +++ b/en/application-dev/reference/arkui-js/js-components-container-tabs.md @@ -1,43 +1,47 @@ # tabs +> **NOTE** +> +> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version. + The **\** component provides a tab container. ## Required Permissions None + ## Child Components -A **\** can wrap at most one **<[tab-bar](js-components-container-tab-bar.md)>** and at most one **<[tab-content](js-components-container-tab-content.md)>**. +Only [\](../arkui-js/js-components-container-tab-bar.md) and [\](../arkui-js/js-components-container-tab-content.md) are supported. ## Attributes -In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. - +In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported. +| Name | Type | Default Value | Mandatory | Description | +| -------- | ------- | ----- | ---- | ---------------------------------------- | +| index | number | 0 | No | Index of the active tab. | +| vertical | boolean | false | No | Whether the tab is vertical. Available values are as follows:
- **false**: The **\** and **\** are arranged vertically.
- **true**: The **\** and **\** are arranged horizontally. | -| Name | Type | Default Value | Mandatory | Description | -| -------- | ------- | ------------- | --------- | ------------------------------------------------------------ | -| index | number | 0 | No | Index of the active tab. | -| vertical | boolean | false | No | Whether the tab is vertical. Available values are as follows:
- **false**: The **\** and **\** are arranged vertically.
- **true**: The **\** and **\** are arranged horizontally. | ## Styles -Styles in [Universal Styles](js-components-common-styles.md) are supported. +The [universal styles](../arkui-js/js-components-common-styles.md) are supported. -## Events -In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported. +## Events +In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported. +| Name | Parameter | Description | +| ------ | ------------------------------------ | ----------------------------- | +| change | { index: indexValue } | Triggered upon tab switching. This event is not triggered when the **index** value is dynamically changed.| -| Name | Parameter | Description | -| ------ | --------------------- | ------------------------------------------------------------ | -| change | { index: indexValue } | Triggered upon tab switching.NOTE:This event is not triggered when the **index** value is dynamically changed. | ## Example -``` +```html
@@ -59,6 +63,9 @@ In addition to the events in [Universal Events](js-components-common-events.md),
+``` + +```css /* xxx.css */ .container { flex-direction: column; @@ -90,6 +97,9 @@ In addition to the events in [Universal Events](js-components-common-events.md), width: 300px; text-align: center; } +``` + +```js // xxx.js export default { change: function(e) { @@ -98,4 +108,4 @@ export default { } ``` -![img](figures/tab.gif) \ No newline at end of file +![tab](figures/tab.gif) diff --git a/en/application-dev/reference/arkui-ts/figures/contextmenu_close.gif b/en/application-dev/reference/arkui-ts/figures/contextmenu_close.gif new file mode 100644 index 0000000000000000000000000000000000000000..424f418c9d18997a3ed29eb777ffb4817d1b2dc4 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/contextmenu_close.gif differ diff --git a/en/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md b/en/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md index 9f4544ab68d5d9d27a666d3c4a02062cfbe3e30b..465f4c3b31e582913757a2da66f0802c5e307cef 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md +++ b/en/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md @@ -1,6 +1,6 @@ # AlphabetIndexer -The **\** component provides an alphabetic index bar. +The **\** component can create a logically indexed array of items in a container for instant location. > **NOTE** > @@ -20,28 +20,29 @@ AlphabetIndexer(value: {arrayValue: Array<string>, selected: number}) | Name| Type| Mandatory| Description| | -------- | -------- | -------- | -------- | -| arrayValue | Array<string> | Yes| Array of strings to be displayed in the alphabetic index bar.| -| selected | number | Yes | Index of the initially selected item. | +| arrayValue | Array<string> | Yes| Array of strings to be displayed in the alphabetic index bar. The value cannot be null.| +| selected | number | Yes | Index of the initially selected item. If the value exceeds the value range, the default value 0 is used. | ## Attributes +In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. | Name | Type | Description | | ----------------------- | --------------- | ----------------------------------------------------------- | -| color | [ResourceColor](ts-types.md#resourcecolor8) | Font color. | -| selectedColor | [ResourceColor](ts-types.md#resourcecolor8) | Font color of the selected text. | -| popupColor | [ResourceColor](ts-types.md#resourcecolor8) | Font color of the pop-up text. | -| selectedBackgroundColor | [ResourceColor](ts-types.md#resourcecolor8) | Background color of the selected item. | -| popupBackground | [ResourceColor](ts-types.md#resourcecolor8) | Background color of the pop-up text. | -| usingPopup | boolean | Whether to use pop-up text. | -| selectedFont | [Font](ts-types.md#font) | Font style of the selected text. | -| popupFont | [Font](ts-types.md#font) | Font style of the pop-up text. | -| font | [Font](ts-types.md#font) | Default font style of the alphabetic index bar. | -| itemSize | string \| number | Size of an item in the alphabetic index bar. The item is a square, and the side length needs to be set. | +| color | [ResourceColor](ts-types.md#resourcecolor8) | Font color.
Default value: **0x99000000** | +| selectedColor | [ResourceColor](ts-types.md#resourcecolor8) | Font color of the selected text.
Default value: **0xFF254FF7** | +| popupColor | [ResourceColor](ts-types.md#resourcecolor8) | Font color of the pop-up text.
Default value: **0xFF254FF7** | +| selectedBackgroundColor | [ResourceColor](ts-types.md#resourcecolor8) | Background color of the selected item.
Default value: **0x1F0A59F7** | +| popupBackground | [ResourceColor](ts-types.md#resourcecolor8) | Background color of the pop-up text.
Default value: **0xFFF1F3F5** | +| usingPopup | boolean | Whether to use pop-up text.
Default value: **false** | +| selectedFont | [Font](ts-types.md#font) | Font style of the selected text.
Default value:
{
fontSize:10,
fontStyle:FontStyle.Normal,
fontWeight:FontWeight.Normal,
fontFamily:HarmonyOS Sans
} | +| popupFont | [Font](ts-types.md#font) | Font style of the pop-up text.
Default value:
{
fontSize:10,
fontStyle:FontStyle.Normal,
fontWeight:FontWeight.Normal,
fontFamily:HarmonyOS Sans
} | +| font | [Font](ts-types.md#font) | Default font style of the alphabetic index bar.
Default value:
{
fontSize:10,
fontStyle:FontStyle.Normal,
fontWeight:FontWeight.Normal,
fontFamily:HarmonyOS Sans
} | +| itemSize | string \| number | Size of an item in the alphabetic index bar. The item is a square, and the side length needs to be set. This attribute cannot be set to a percentage.
Default value: **24.0** | | alignStyle | IndexerAlign | Alignment style of the alphabetic index bar. Left alignment and right alignment are supported.
Default value: **IndexerAlign.Right**| -| selected | number | Index of the selected item.| -| popupPosition | [Position](ts-types.md#position8) | Position of the pop-up window relative to the center of the indexer bar's top border.| +| selected | number | Index of the selected item.
Default value: **0**| +| popupPosition | [Position](ts-types.md#position8) | Position of the pop-up window relative to the center of the indexer bar's top border.
Default value: **{x:96.0, y:48.0}**| -## IndexerAlign enums +## IndexerAlign | Name| Description| | -------- | -------- | @@ -50,6 +51,7 @@ AlphabetIndexer(value: {arrayValue: Array<string>, selected: number}) ## Events +Only the following events are supported. | Name| Description| | -------- | -------- | | onSelected(callback: (index: number) => void)(deprecated) | Invoked when an item in the alphabetic indexer bar is selected. The return value is the index of the selected item. | diff --git a/en/application-dev/reference/arkui-ts/ts-methods-menu.md b/en/application-dev/reference/arkui-ts/ts-methods-menu.md index 2ec2ca6de9ac76320cc1d34aaf415dca81edcc48..ab488dffe740737b4f6b2a9d947928dc88395590 100644 --- a/en/application-dev/reference/arkui-ts/ts-methods-menu.md +++ b/en/application-dev/reference/arkui-ts/ts-methods-menu.md @@ -1,14 +1,17 @@ # Menu -> **NOTE** +The menu bound to a component through [bindContextMenu](./ts-universal-attributes-menu.md#attributes) on a page can be closed as needed. + +> **NOTE** > -> This method is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. +> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. + ## ContextMenu.close close(): void -Closes the menu bound to this component through [bindContextMenu](./ts-universal-attributes-menu.md#atrributes) on a page. +Closes the menu bound to this component through [bindContextMenu](./ts-universal-attributes-menu.md#attributes) on a page. ## Example @@ -17,26 +20,38 @@ Closes the menu bound to this component through [bindContextMenu](./ts-universal @Entry @Component struct Index { - @Builder MenuBuilder(){ + @Builder MenuBuilder() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Text('close') - .fontSize(30) - .fontWeight(FontWeight.Bold) - .onClick(() => { - ContextMenu.close(); - }) - }.height(400) - .backgroundColor(Color.Pink) + Button('Test ContextMenu1') + Divider().strokeWidth(2).margin(5) + Button('Test ContextMenu2') + Divider().strokeWidth(2).margin(5) + Button('Test ContextMenu3') + } + .width(200) + .height(160) } build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.Start }) { - Column(){ - Text("Text") - }.bindContextMenu(this.MenuBuilder, ResponseType.LongPress) + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Column() { + Text("Test ContextMenu") + .fontSize(20) + .width('100%') + .height(500) + .backgroundColor(0xAFEEEE) + .textAlign(TextAlign.Center) + } + .bindContextMenu(this.MenuBuilder, ResponseType.LongPress) + .onDragStart(()=>{ + // Close the menu when the component is dragged. + ContextMenu.close() + }) } .width('100%') .height('100%') } } ``` + +![contextmenu_close.gif](figures/contextmenu_close.gif) diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-overlay.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-overlay.md index 9db9b9eb822b8ff6fc751bdeebd4207c60d04e3f..4bb23b9f11f8f7ab4aa187fedaca3ab37716a461 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-overlay.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-overlay.md @@ -8,10 +8,9 @@ You can set overlay text for a component. ## Attributes -| Name | Type | Description | -| ------- | ----------------------------- | ------------------------- | -| overlay | value: string,
options?: {
align?: [Alignment](ts-appendix-enums.md#alignment),
offset?: {x?: number, y?: number}
} | Overlay added to the component. The overlay has the same layout as the component.
Default value:
{
align: Alignment.Center,
offset: {0, 0}
} | - +| Name| Type| Default Value| Description| +| -------- | -------- | -------- | -------- | +| overlay | value: string,
options?: {
align?: [Alignment](ts-appendix-enums.md#alignment),
offset?: {x?: number, y?: number}
} | {
align: Alignment.Center,
offset: {0, 0}
} | Overlay added to the component.
**value**: mask text.
**options**: text positioning. **align** indicates the location of the text relative to the component. **[offset](ts-universal-attributes-location.md)** indicates the offset of the text relative to the upper left corner of itself. By default, the text is in the upper left corner of the component.
If both **align** and **offset** are set, the text is first positioned relative to the component, and then offset relative to the upper left corner of itself.| ## Example @@ -28,7 +27,10 @@ struct OverlayExample { Column() { Image($r('app.media.img')) .width(240).height(240) - .overlay("Winter is a beautiful season, especially when it snows.", { align: Alignment.Bottom, offset: { x: 0, y: -15 } }) + .overlay("Winter is a beautiful season, especially when it snows.", { + align: Alignment.Bottom, + offset: { x: 0, y: -15 } + }) }.border({ color: Color.Black, width: 2 }) }.width('100%') }.padding({ top: 20 }) diff --git a/en/application-dev/ui/ui-js-building-ui-routes.md b/en/application-dev/ui/ui-js-building-ui-routes.md index c4fccae121e30d9c2c2aa6ea4cbf3c707421cc29..6459590ba21ad7dbb67cde8096424af72bf8ff08 100644 --- a/en/application-dev/ui/ui-js-building-ui-routes.md +++ b/en/application-dev/ui/ui-js-building-ui-routes.md @@ -1,25 +1,23 @@ # Defining Page Routes - -An application generally consist of more than one page. For example, in a music application, a user taps a song on a music list page to jump to the playback page of the song. You need to link these pages through the page router to implement redirection as required. +An application generally consists of more than one page. For example, a music application may come with a music list page and a playback page. You need to link these pages through the page router to implement redirection as required. For example, in a music application, a user taps a song on a music list page to jump to the playback page of the song. The page router finds the target page based on the page URI. The following describes how to implement redirection between two pages: -1. In the **Project** window of DevEco Studio, choose **entry** > **src** > **mainjsdefault**. Right-click the **pages** folder and choose **NewJS Page** from the shortcut menu to create the detail page. +1. In the **Project** window of DevEco Studio, choose **src** > **main** > **js** > **MainAbility**. Right-click the **pages** folder and choose **NewJS Page** from the shortcut menu to create the **detail** page. -2. Call **router.push()** to navigate users to the detail page. +2. Call **router.push()** to navigate users to the **detail** page. -3. Call **router.back()** to navigate users to the index page. +3. Call **router.back()** to navigate users to the **index** page. ## Building the Page Layout -The index and detail pages each contains a <text> component that specifies the current page, and a **\