** component.
-### Objects to Import
+#### Objects to Import
```
@@ -86,7 +86,7 @@ controller: TextInputController = new TextInputController()
```
-### caretPosition
+#### caretPosition
caretPosition(value: number): void
@@ -113,10 +113,9 @@ struct TextInputExample1 {
build() {
Column() {
- TextArea({ placeholder: 'input your word' })
+ TextInput({ placeholder: 'input your word' })
.placeholderColor("rgb(0,0,225)")
.placeholderFont({ size: 30, weight: 100, family: 'cursive', style: FontStyle.Italic })
- .textAlign(TextAlign.Center)
.caretColor(Color.Blue)
.height(50)
.fontSize(30)
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-web.md b/en/application-dev/reference/arkui-ts/ts-basic-components-web.md
index 068f19a35f1275818b5a8beec11ad9f60236af73..b0348580d7af8e571c2e11f941c05c8468575984 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-web.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-web.md
@@ -48,7 +48,7 @@ Not supported
| textZoomAtio | number | 100 | Text zoom ratio of the page. The default value is **100**, which indicates 100%. |
| userAgent | string | - | User agent. |
-> **NOTE**
+> **NOTE**
>
> Only the following universal attributes are supported: [width](ts-universal-attributes-size.md#Attributes), [height](ts-universal-attributes-size.md#Attributes), [padding](ts-universal-attributes-size.md#Attributes), [margin](ts-universal-attributes-size.md#Attributes), and [border](ts-universal-attributes-border.md#Attributes).
@@ -74,97 +74,85 @@ The universal events are not supported.
| onShowFileSelector(callback: (event?: { result: [FileSelectorResult](#fileselectorresult), fileSelector: [FileSelectorParam](#fileselectorparam) }) => void) | Triggered to process an HTML form whose input type is **file**, in response to the tapping of the **Select File** button.
**result**: file selection result to be sent to the web component.
**fileSelector**: information about the file selector.
|
| onUrlLoadIntercept(callback: (event?: { data:string \| [WebResourceRequest](#webresourcerequest) }) => boolean) | Triggered before the **\** component loads the URL to determine whether to block the access. The callback returns **true** if the access is blocked, and **false** otherwise.
**data**: URL information.
|
-### ConsoleMessage
-
-- APIs
+## ConsoleMessage
- | Name | Description |
- | ------------------------------- | ---------------------- |
- | getLineNumber(): number | Obtains the number of rows in the **ConsoleMessage**. |
- | getMessage(): string | Obtains the log information of the **ConsoleMessage**.|
- | getMessageLevel(): MessageLevel | Obtains the log information level of the **ConsoleMessage**.|
- | getSourceId(): string | Obtains the path and name of the web page source file. |
+| Name | Description |
+| ------------------------------- | ---------------------- |
+| getLineNumber(): number | Obtains the number of rows in the **ConsoleMessage**. |
+| getMessage(): string | Obtains the log information of the **ConsoleMessage**.|
+| getMessageLevel(): [MessageLevel](#messagelevel-enums) | Obtains the log information level of the **ConsoleMessage**.|
+| getSourceId(): string | Obtains the path and name of the web page source file. |
-- MessageLevel enums
+## MessageLevel Enums
- | Name | Description |
- | ----- | :---- |
- | Debug | Debug level.|
- | Error | Error level.|
- | Info | Information level.|
- | Log | Log level.|
- | Warn | Warning level. |
+| Name | Description |
+| ----- | :---- |
+| Debug | Debug level.|
+| Error | Error level.|
+| Info | Information level.|
+| Log | Log level.|
+| Warn | Warning level. |
-### JsResult
+## JsResult
Provides the result returned to the **\** component to indicate the user operation performed in the dialog box.
-- APIs
-
- | Name | Description |
- | --------------------- | ----------------------- |
- | handleCancel(): void | The user's cancel operation in the dialog box.
|
- | handleConfirm(): void | The user's confirm operation in the dialog box.
|
+| Name | Description |
+| --------------------- | ----------------------- |
+| handleCancel(): void | The user's cancel operation in the dialog box.
|
+| handleConfirm(): void | The user's confirm operation in the dialog box.
|
-### WebResourceError
+## WebResourceError
-- APIs
-
- | Name | Description |
- | ---------------------- | ------------ |
- | getErrorCode(): number | Obtains the error code for resource loading. |
- | getErrorInfo(): string | Obtains error information about resource loading.|
-
-### WebResourceRequest
+| Name | Description |
+| ---------------------- | ------------ |
+| getErrorCode(): number | Obtains the error code for resource loading. |
+| getErrorInfo(): string | Obtains error information about resource loading.|
-- APIs
+## WebResourceRequest
- | Name | Description |
- | ---------------------------------------- | -------------------- |
- | getRequestHeader(): Array\<[Header](#header)\> | Obtains the information about the resource request header. |
- | getRequestUrl(): string | Obtains the URL of the resource request. |
- | isMainFrame(): boolean | Checks whether the resource request is in the main frame. |
- | isRedirect(): boolean | Checks whether the resource request is redirected by the server. |
- | isRequestGesture(): boolean | Checks whether the resource request is associated with a gesture (for example, a tap).|
+| Name | Description |
+| ---------------------------------------- | -------------------- |
+| getRequestHeader(): Array\<[Header](#header)\> | Obtains the information about the resource request header. |
+| getRequestUrl(): string | Obtains the URL of the resource request. |
+| isMainFrame(): boolean | Checks whether the resource request is in the main frame. |
+| isRedirect(): boolean | Checks whether the resource request is redirected by the server. |
+| isRequestGesture(): boolean | Checks whether the resource request is associated with a gesture (for example, a tap).|
-### Header
+## Header
Describes the request/response header returned by the **\** component.
-- Parameters
-
- | Name | Type | Description |
- | ----------- | ------ | ------------- |
- | headerKey | string | Key of the request/response header. |
- | headerValue | string | Value of the request/response header.|
-
+| Name | Type | Description |
+| ----------- | ------ | ------------- |
+| headerKey | string | Key of the request/response header. |
+| headerValue | string | Value of the request/response header.|
-### WebResourceResponse
-- APIs
+## WebResourceResponse
- | Name | Description |
- | ---------------------------------------- | ------------------ |
- | getReasonMessage(): string | Obtains the status code description of the resource response. |
- | getResponseCode(): number | Obtains the status code of the resource response. |
- | getResponseData(): string | Obtains the data in the resource response. |
- | getResponseEncoding(): string | Obtains the encoding of the resource response. |
- | getResponseHeader(): Array\<[Header](#header)\> | Obtains the resource response header. |
- | getResponseMimeType(): string | Obtains the media (MIME) type of the resource response.|
+| Name | Description |
+| ---------------------------------------- | ------------------ |
+| getReasonMessage(): string | Obtains the status code description of the resource response. |
+| getResponseCode(): number | Obtains the status code of the resource response. |
+| getResponseData(): string | Obtains the data in the resource response. |
+| getResponseEncoding(): string | Obtains the encoding of the resource response. |
+| getResponseHeader(): Array\<[Header](#header)\> | Obtains the resource response header. |
+| getResponseMimeType(): string | Obtains the media (MIME) type of the resource response.|
-### RenderExitReason
+## RenderExitReason
Explains why the rendering process exits.
| Name | Description |
| -------------------------- | ----------------- |
-| ProcessAbnormalTermination | The rendering process exits abnormally. |
-| ProcessWasKilled | The rendering process receives a SIGKILL message or is manually terminated.|
-| ProcessCrashed | The rendering process crashes due to a segmentation error or other errors. |
-| ProcessOom | The program memory is running low. |
-| ProcessExitUnknown | Other reason. |
+| PROCESS_ABNORMAL_TERMINATION | The rendering process exits abnormally. |
+| PROCESS_WAS_KILLED | The rendering process receives a SIGKILL message or is manually terminated.|
+| PROCESS_CRASHED | The rendering process crashes due to a segmentation error or other errors. |
+| PROCESS_OOM | The program memory is running low. |
+| PROCESS_EXIT_UNKNOWN | Other reason. |
-### MixedMode
+## MixedMode
| Name | Description |
| ---------- | ---------------------------------- |
@@ -172,7 +160,7 @@ Explains why the rendering process exits.
| Compatible | HTTP and HTTPS hybrid content can be loaded in compatibility mode. This means that some insecure content may be loaded. |
| None | HTTP and HTTPS hybrid content cannot be loaded. |
-### CacheMode
+## CacheMode
| Name | Description |
| ------- | ------------------------------------ |
| Default | The cache that has not expired is used to load the resources. If the resources do not exist in the cache, they will be obtained from the Internet.|
@@ -180,32 +168,28 @@ Explains why the rendering process exits.
| Online | The cache is not used to load the resources. All resources are obtained from the Internet. |
| Only | The cache alone is used to load the resources. |
-### FileSelectorResult
+## FileSelectorResult
Notifies the **\** component of the file selection result.
-- APIs
-
- | Name | Description |
- | ---------------------------------------------- | ------------------------------------------------------------ |
- | handleFileList(fileList: Array\): void | Instructs the **\** component to select a file.
**fileList**: list of files to operate. |
-
-### FileSelectorParam
-- APIs
+| Name | Description |
+| ---------------------------------------------- | ------------------------------------------------------------ |
+| handleFileList(fileList: Array\): void | Instructs the **\** component to select a file.
**fileList**: list of files to operate. |
- | Name | Description |
- | -------------------------------- | ------------ |
- | getTitle(): string | Obtains the title of the file selector. |
- | getMode(): FileSelectorMode | Obtains the mode of the file selector. |
- | getAcceptType(): Array\ | Obtains the file filtering type. |
- | isCapture(): boolean | Checks whether multimedia capabilities are invoked.|
+## FileSelectorParam
+| Name | Description |
+| -------------------------------- | ------------ |
+| title(): string | Title of the file selector. |
+| mode(): FileSelectorMode | Mode of the file selector. |
+| acceptType(): Array\ | File filtering type. |
+| isCapture(): boolean | Whether multimedia capabilities are invoked.|
-### FileSelectorMode
+## FileSelectorMode
| Name | Description |
| -------------------- | ---------- |
-| FileOpenMode | Open and upload a file. |
-| FileOpenMultipleMode | Open and upload multiple files. |
-| FileOpenFolderMode | Open and upload a folder.|
-| FileSaveMode | Save a file. |
+| FILE_OPEN_MODE | Open and upload a file. |
+| FILE_OPEN_MULTIPLE_MODE | Open and upload multiple files. |
+| FILE_OPEN_FOLDER_MODE | Open and upload a folder.|
+| FILE_SAVE_MODE | Save a file. |
## WebController
diff --git a/en/application-dev/reference/arkui-ts/ts-container-navigator.md b/en/application-dev/reference/arkui-ts/ts-container-navigator.md
index df3e651383f44aa20499e0a17a6dd9c0366e9409..4ccc7889444ed6de73832fa7e91616f718eab2b0 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-navigator.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-navigator.md
@@ -1,11 +1,12 @@
# Navigator
->  **NOTE**
+> **NOTE**
+>
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
-The **<Navigator>** component provides redirection.
+The **\** component provides redirection to the target page.
## Required Permissions
@@ -25,42 +26,43 @@ Navigator(value?: {target: string, type?: NavigationType})
Creates a navigator.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | target | string | Yes | - | Path of the target page to be redirected to. |
- | type | NavigationType | No | NavigationType.Push | Navigation type. |
+ | target | string | Yes | - | Path of the target page to be redirected to. |
+ | type | NavigationType | No | NavigationType.Push | Navigation type. |
- NavigationType enums
- | Name | Description |
+ | Name | Description |
| -------- | -------- |
- | Push | Navigates to a specified page in the application. |
- | Replace | Replaces the current page with another one in the application and destroys the current page. |
- | Back | Returns to the previous page or a specified page. |
+ | Push | Navigates to a specified page in the application. |
+ | Replace | Replaces the current page with another one in the application and destroys the current page. |
+ | Back | Returns to the previous page or a specified page. |
## Attributes
- | Name | Parameters | Default Value | Description |
+| Name | Parameters | Default Value | Description |
| -------- | -------- | -------- | -------- |
-| active | boolean | - | Whether the **<Navigator>** component is activated. If the component is activated, the corresponding navigation takes effect. |
-| params | Object | undefined | Data that needs to be passed to the target page during redirection. You can use **router.getParams()** to obtain the data on the target page. |
+| active | boolean | - | Whether the **\** component is activated. If the component is activated, the corresponding navigation takes effect. |
+| params | Object | undefined | Data that needs to be passed to the target page during redirection. You can use **router.getParams()** to obtain the data on the target page. |
## Example
-
-```
-// Navigator Page
+
+```ts
+// Navigator.ets
@Entry
@Component
struct NavigatorExample {
@State active: boolean = false
- @State Text: string = 'news'
+ @State Text: object = {name: 'news'}
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {
Navigator({ target: 'pages/container/navigator/Detail', type: NavigationType.Push }) {
- Text('Go to ' + this.Text + ' page').width('100%').textAlign(TextAlign.Center)
+ Text('Go to ' + this.Text['name'] + ' page')
+ .width('100%').textAlign(TextAlign.Center)
}.params({ text: this.Text })
Navigator() {
@@ -74,15 +76,15 @@ struct NavigatorExample {
}
```
-
-```
-// Detail Page
+
+```ts
+// Detail.ets
import router from '@system.router'
@Entry
@Component
struct DetailExample {
- @State text: string = router.getParams().text
+ @State text: any = router.getParams().text
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {
@@ -90,7 +92,8 @@ struct DetailExample {
Text('Go to back page').width('100%').height(20)
}
- Text('This is ' + this.text + ' page').width('100%').textAlign(TextAlign.Center)
+ Text('This is ' + this.text['name'] + ' page')
+ .width('100%').textAlign(TextAlign.Center)
}
.width('100%').height(200).padding({ left: 35, right: 35, top: 35 })
}
@@ -98,9 +101,8 @@ struct DetailExample {
```
-
-```
-// Back Page
+```ts
+// Back.ets
@Entry
@Component
struct BackExample {
diff --git a/en/application-dev/reference/arkui-ts/ts-gesture-settings.md b/en/application-dev/reference/arkui-ts/ts-gesture-settings.md
index 8f5554c25a3529499aa415d93154cee7c0930f20..8c2d676ceccbb0bc989343db94aadc0d0fff1e78 100644
--- a/en/application-dev/reference/arkui-ts/ts-gesture-settings.md
+++ b/en/application-dev/reference/arkui-ts/ts-gesture-settings.md
@@ -16,51 +16,53 @@ None
Use the following attributes to bind gesture recognition to a component. When a gesture is recognized, the event callback is invoked to notify the component.
-| Name | Type | Default Value | Description |
+| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
-| gesture | gesture: GestureType,
mask?: GestureMask | gesture: -,
mask: GestureMask.Normal | Gesture to recognize.
**gesture** specifies the type of the gesture to bind, and **mask** specifies the event response setting. |
-| priorityGesture | gesture: GestureType,
mask?: GestureMask | gesture: -,
mask: GestureMask.Normal | Gesture to preferentially recognize.
**gesture** specifies the type of the gesture to bind, and **mask** specifies the event response setting.
>  **NOTE**
> - By default, the child component takes precedence over the parent component in gesture recognition. When **priorityGesture** is configured for the parent component, the parent component takes precedence over the child component in gesture recognition. |
-| parallelGesture | gesture: GestureType,
mask?: GestureMask | gesture: -,
mask: GestureMask.Normal | Gesture that can be triggered together with the child component gesture.
**gesture** specifies the type of the gesture to bind, and **mask** specifies the event response setting.
>  **NOTE**
> - The gesture event is not a bubbling event. When **parallelGesture** is set for the parent component, gesture events that are the same for the parent component and child components can be triggered, thereby implementing a bubbling effect. |
+| gesture | gesture: GestureType,
mask?: GestureMask | gesture: -,
mask: GestureMask.Normal | Gesture to recognize.
- **gesture**: type of the gesture to bind.
- **mask**: event response setting. |
+| priorityGesture | gesture: GestureType,
mask?: GestureMask | gesture: -,
mask: GestureMask.Normal | Gesture to preferentially recognize.
- **gesture**: type of the gesture to bind.
- **mask**: event response setting.
By default, the child component takes precedence over the parent component in gesture recognition. When **priorityGesture** is configured for the parent component, the parent component takes precedence over the child component in gesture recognition. |
+| parallelGesture | gesture: GestureType,
mask?: GestureMask | gesture: -,
mask: GestureMask.Normal | Gesture that can be triggered together with the child component gesture.
- **gesture**: type of the gesture to bind.
- **mask**: event response setting.
The gesture event is not a bubbling event. When **parallelGesture** is set for the parent component, gesture events bound to both the parent and child components can be triggered, thereby implementing a bubbling effect. |
- GestureMask enums
- | Name | Description |
+ | Name | Description |
| -------- | -------- |
- | Normal | The gestures of child components are not masked and are recognized based on the default gesture recognition sequence. |
- | IgnoreInternal | The gestures of child components are masked. Only the gestures of the current component are recognized.
>  **NOTE**
> However, the built-in gestures of the child components are not masked. For example, when the child component is a **<List>** component, the built-in sliding gestures can still be triggered. |
+ | Normal | The gestures of child components are not masked and are recognized based on the default gesture recognition sequence. |
+ | IgnoreInternal | The gestures of child components are masked. Only the gestures of the current component are recognized.
However, the built-in gestures of the child components are not masked. For example, when the child component is a **<List>** component, the built-in sliding gestures can still be triggered. |
-- Gesture types
- | Name | Description |
+- GestureType enums
+ | Name | Description |
| -------- | -------- |
- | TapGesture | Tap gesture, which can be a single-tap or multi-tap gesture. |
- | LongPressGesture | Long press gesture. |
- | PanGesture | Pan gesture. |
- | PinchGesture | Pinch gesture. |
- | RotationGesture | Rotation gesture. |
- | GestureGroup | A group of gestures. Continuous recognition, parallel recognition, and exclusive recognition are supported. |
+ | TapGesture | Tap gesture, which can be a single-tap or multi-tap gesture. |
+ | LongPressGesture | Long press gesture. |
+ | PanGesture | Pan gesture. |
+ | PinchGesture | Pinch gesture. |
+ | RotationGesture | Rotation gesture. |
+ | SwipeGesture | Swipe gesture, which can be idenfied when the swipe speed is 100 vp/s or higher. |
+ | GestureGroup | A group of gestures. Continuous recognition, parallel recognition, and exclusive recognition are supported. |
## Gesture Response Event
-The component uses the **gesture** method to bind the gesture object and uses the events provided in this object to respond to the gesture operation. For example, the **onAction** event of the **TapGesture** object can be used to respond to a click event. For details about the event definition, see the section of each gesture object.
+A component uses the **gesture** method to bind the gesture object and uses the events provided in this object to respond to the gesture operation. For example, the **onAction** event of the **TapGesture** object can be used to respond to a click event. For details about the event definition, see the section of each gesture object.
- TapGesture events
- | Name | Description |
+ | Name | Description |
| -------- | -------- |
- | onAction((event?: GestureEvent) => void) | Callback invoked when a tap gesture is recognized. |
+ | onAction((event?: GestureEvent) => void) | Callback invoked when a tap gesture is recognized. |
- GestureEvent attributes
- | Name | Type | Description |
+ | Name | Type | Description |
| -------- | -------- | -------- |
- | timestamp | number | Timestamp of the event. |
- | target8+ | EventTarget | Object that triggers the gesture event. |
+ | timestamp | number | Timestamp of the event. |
+ | target8+ | [EventTarget](ts-universal-events-click.md) | Object that triggers the gesture event. |
## Example
```ts
+// xxx.ets
@Entry
@Component
struct GestureSettingsExample {
diff --git a/en/application-dev/reference/arkui-ts/ts-motion-path-animation.md b/en/application-dev/reference/arkui-ts/ts-motion-path-animation.md
index 0293a61a861421aeb80118dbb63c6d34c9ce3058..073938a1009eb7441efd4039de84ba8a24cf188c 100644
--- a/en/application-dev/reference/arkui-ts/ts-motion-path-animation.md
+++ b/en/application-dev/reference/arkui-ts/ts-motion-path-animation.md
@@ -1,23 +1,24 @@
# Motion Path Animation
->  **NOTE**
+> **NOTE**
+>
> This animation is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
-The attributes described in this topic are used to set the motion path of the component in a translation animation.
+The attributes below can be used to set the motion path of the component in a translation animation.
## Attributes
- | Name | Type | Default Value | Description |
+| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
-| motionPath | {
path: string,
from?: number,
to?: number,
rotatable?: boolean
}
>  **NOTE**
> In a path, **start** and **end** can be used to replace the start point and end point. Example:
>
> 'Mstart.x start.y L50 50 Lend.x end.y Z' | {
"",
0.0,
1.0,
false
} | Motion path of the component. The input parameters are described as follows:
- **path**: motion path of the translation animation. The **svg** path string is used.
- **from**: start point of the motion path. The default value is **0.0**.
- **to**: end point of the motion path. The default value is **1.0**.
- **rotatable**: whether to rotate along the path. |
+| motionPath | {
path: string,
from?: number,
to?: number,
rotatable?: boolean
}
**NOTE**
In a path, **start** and **end** can be used to replace the start point and end point. Example:
'Mstart.x start.y L50 50 Lend.x end.y Z' | {
"",
0.0,
1.0,
false
} | Motion path of the component. The input parameters are described as follows:
- **path**: motion path of the translation animation. The **svg** path string is used.
- **from**: start point of the motion path. The default value is **0.0**.
- **to**: end point of the motion path. The default value is **1.0**.
- **rotatable**: whether to rotate along the path. |
## Example
-
+
```
@Entry
@Component
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md
index 4e27ab2eb1aaf983c0128787925377339d67ad3e..43907b4096dc2a0eb3c524b33a489bfd8eed1689 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md
@@ -1,8 +1,11 @@
# Component ID
+**id** identifies a component uniquely within an application. This module provides APIs for obtaining the attributes of or sending events to the component with the specified ID.
->  **NOTE**
-> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
+> **NOTE**
+>
+> - The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
+> - The APIs provided by this module are system APIs.
## Required Permissions
@@ -12,9 +15,9 @@ None
## Attributes
- | Name | Type | Default Value | Description |
-| -------- | -------- | -------- | -------- |
-| id | string | '' | Unique ID of the component. The uniqueness is ensured by the user. |
+| Name | Type | Default Value | Description |
+| ---- | ------ | ---- | ------------------ |
+| id | string | '' | Unique ID you assigned to the component.|
## APIs
@@ -27,15 +30,26 @@ getInspectorByKey(id: string): string
Obtains all attributes of the component with the specified ID, excluding the information about child components.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
- | -------- | -------- | -------- | -------- | -------- |
- | id | string | Yes | - | ID of the component whose attributes are to be obtained. |
+ | Name | Type | Mandatory | Default Value | Description |
+ | ---- | ------ | ---- | ---- | ----------- |
+ | id | string | Yes | - | ID of the component whose attributes are to be obtained.|
- Return value
- | Type | Description |
- | -------- | -------- |
- | string | JSON string of the component attribute list. |
+ | Type | Description |
+ | ------ | --------------- |
+ | string | JSON string of the component attribute list.|
+### getInspectorTree
+
+getInspectorTree(): string
+
+Obtains the component tree and component attributes.
+
+- Return value
+
+ | Type | Description |
+ | ------ | ------------------- |
+ | string | JSON string of the component tree and component attribute list.|
### sendEventByKey
@@ -44,61 +58,207 @@ sendEventByKey(id: string, action: number, params: string): boolean
Sends an event to the component with the specified ID.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
- | -------- | -------- | -------- | -------- | -------- |
- | id | string | Yes | - | ID of the component for which the event is to be sent. |
- | action | number | Yes | - | Type of the event to be sent. The options are as follows:
- Click event: 10.
- LongClick: 11. |
- | params | string | Yes | - | Event parameters. If there is no parameter, pass an empty string **""**. |
+ | Name | Type | Mandatory | Default Value | Description |
+ | ------ | ------ | ---- | ---- | ---------------------------------------- |
+ | id | string | Yes | - | ID of the component to which the event is to be sent. |
+ | action | number | Yes | - | Type of the event to be sent. The options are as follows:
- **10**: click event.
- **11**: long click event.|
+ | params | string | Yes | - | Event parameters. If there is no parameter, pass an empty string **""**. |
+
+- Return value
+ | Type | Description |
+ | ------- | ------------------------------ |
+ | boolean | Returns **true** if the component with the specified ID is found; returns **false** otherwise.|
+
+### sendTouchEvent
+
+sendTouchEvent(event: TouchObject): boolean
+
+Sends a touch event.
+
+- Parameters
+
+ | Name | Type | Mandatory | Default Value | Description |
+ | ----- | ----------- | ---- | ---- | ---------------------------------------- |
+ | event | TouchObject | Yes | - | Location where a touch event is triggered. For details, see [TouchEvent](ts-universal-events-touch.md#touchevent).|
+
+- Return value
+
+ | Type | Description |
+ | ------- | -------------------------- |
+ | boolean | Returns **true** if the event is sent successfully; returns **false** otherwise.|
+
+### sendKeyEvent
+
+sendKeyEvent(event: KeyEvent): boolean
+
+Sends a key event.
+
+- Parameters
+
+ | Name | Type | Mandatory | Default Value | Description |
+ | ----- | -------- | ---- | ---- | ---------------------------------------- |
+ | event | KeyEvent | Yes | - | Key event. For details, see [KeyEvent](ts-universal-events-key.md#keyevent).|
+
+- Return value
+
+ | Type | Description |
+ | ------- | --------------------------- |
+ | boolean | Returns **true** if the event is sent successfully; returns **false** otherwise.|
+
+### sendMouseEvent
+
+sendMouseEvent(event: MouseEvent): boolean
+
+Sends a mouse event.
+
+- Parameters
+
+ | Name | Type | Mandatory | Default Value | Description |
+ | ----- | ---------- | ---- | ---- | ---------------------------------------- |
+ | event | MouseEvent | Yes | - | Mouse event. For details, see [MouseEvent](ts-universal-mouse-key.md#mouseevent).|
- Return value
- | Type | Description |
- | -------- | -------- |
- | boolean | Returns **false** if the component with the specified ID cannot be found; returns **true** otherwise. |
+ | Type | Description |
+ | ------- | --------------------------- |
+ | boolean | Returns **true** if the event is sent successfully; returns **false** otherwise.|
## Example
-
-```
+```ts
+// xxx.ets
+class Utils {
+ static rect_left;
+ static rect_top;
+ static rect_right;
+ static rect_bottom;
+ static rect_value;
+
+ static getComponentRect(key) {
+ let strJson = getInspectorByKey(key);
+ let obj = JSON.parse(strJson);
+ console.info("[getInspectorByKey] current component obj is: " + JSON.stringify(obj));
+ let rectInfo = JSON.parse('[' + obj.$rect + ']')
+ console.info("[getInspectorByKey] rectInfo is: " + rectInfo);
+ this.rect_left = JSON.parse('[' + rectInfo[0] + ']')[0]
+ this.rect_top = JSON.parse('[' + rectInfo[0] + ']')[1]
+ this.rect_right = JSON.parse('[' + rectInfo[1] + ']')[0]
+ this.rect_bottom = JSON.parse('[' + rectInfo[1] + ']')[1]
+ return this.rect_value = {
+ "left": this.rect_left, "top": this.rect_top, "right": this.rect_right, "bottom": this.rect_bottom
+ }
+ }
+}
+
@Entry
@Component
struct IdExample {
+ @State text: string = ''
+
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+
Button() {
- Text('click')
- .fontSize(25)
- .fontWeight(FontWeight.Bold)
- }
- .type(ButtonType.Capsule)
- .margin({
- top: 20
- }).onClick(() => {
+ Text('onKeyTab').fontSize(25).fontWeight(FontWeight.Bold)
+ }.margin({ top: 20 }).backgroundColor('#0D9FFB')
+ .onKeyEvent(() => {
+ this.text = "onKeyTab"
+ })
+
+ Button() {
+ Text('click to start').fontSize(25).fontWeight(FontWeight.Bold)
+ }.margin({ top: 20 })
+ .onClick(() => {
console.info(getInspectorByKey("click"))
console.info(getInspectorTree())
+ this.text = "Button 'click to start' is clicked"
setTimeout(() => {
sendEventByKey("longclick", 11, "")
}, 2000)
}).id('click')
Button() {
- Text('longclick')
- .fontSize(25)
- .fontWeight(FontWeight.Bold)
- }
- .type(ButtonType.Capsule)
- .margin({
- top: 20
- })
- .backgroundColor('#0D9FFB')
+ Text('longclick').fontSize(25).fontWeight(FontWeight.Bold)
+ }.margin({ top: 20 }).backgroundColor('#0D9FFB')
.gesture(
- LongPressGesture().onActionEnd(() => {
- console.info('long clicked')
- }))
- .id('longclick')
+ LongPressGesture().onActionEnd(() => {
+ console.info('long clicked')
+ this.text = "Button 'longclick' is longclicked"
+ setTimeout(() => {
+ let rect = Utils.getComponentRect('onTouch')
+ let touchPoint: TouchObject = {
+ id: 1,
+ x: rect.left + (rect.right - rect.left) / 2,
+ y: rect.top + (rect.bottom - rect.top) / 2,
+ type: TouchType.Down,
+ screenX: rect.left + (rect.right - rect.left) / 2,
+ screenY: rect.left + (rect.right - rect.left) / 2,
+ }
+ sendTouchEvent(touchPoint)
+ touchPoint.type = TouchType.Up
+ sendTouchEvent(touchPoint)
+ }, 2000)
+ })).id('longclick')
+
+ Button() {
+ Text('onTouch').fontSize(25).fontWeight(FontWeight.Bold)
+ }.type(ButtonType.Capsule).margin({ top: 20 })
+ .onClick(() => {
+ console.info('onTouch is clicked')
+ this.text = "Button 'onTouch' is clicked"
+ setTimeout(() => {
+ let rect = Utils.getComponentRect('onMouse')
+ let mouseEvent: MouseEvent = {
+ button: MouseButton.Left,
+ action: MouseAction.Press,
+ x: rect.left + (rect.right - rect.left) / 2,
+ y: rect.top + (rect.bottom - rect.top) / 2,
+ screenX: rect.left + (rect.right - rect.left) / 2,
+ screenY: rect.top + (rect.bottom - rect.top) / 2,
+ timestamp: 1,
+ target: {
+ area: {
+ width: 1,
+ height: 1,
+ position: {
+ x: 1,
+ y: 1
+ },
+ globalPosition: {
+ x: 1,
+ y: 1
+ }
+ }
+ },
+ source: SourceType.Mouse
+ }
+ sendMouseEvent(mouseEvent)
+ }, 2000)
+ }).id('onTouch')
+
+ Button() {
+ Text('onMouse').fontSize(25).fontWeight(FontWeight.Bold)
+ }.margin({ top: 20 }).backgroundColor('#0D9FFB')
+ .onMouse(() => {
+ console.info('onMouse')
+ this.text = "Button 'onMouse' in onMouse"
+ setTimeout(() => {
+ let keyEvent: KeyEvent = {
+ type: KeyType.Down,
+ keyCode: 2049,
+ keyText: 'tab',
+ keySource: 4,
+ deviceId: 0,
+ metaKey: 0,
+ timestamp: 0
+ }
+ sendKeyEvent(keyEvent)
+ }, 2000)
+ }).id('onMouse')
+
+ Text(this.text).fontSize(25).padding(15)
}
- .width('100%')
- .height('100%')
+ .width('100%').height('100%')
}
}
```
diff --git a/en/device-dev/guide/device-wlan-led-control.md b/en/device-dev/guide/device-wlan-led-control.md
index d35ab0376543e37ae7957a92323b601e7ecd330f..f6ecb319c17b8fd53aa9bdb4595232239f0773a3 100644
--- a/en/device-dev/guide/device-wlan-led-control.md
+++ b/en/device-dev/guide/device-wlan-led-control.md
@@ -6,9 +6,9 @@ Based on the Hi3861 platform, the OpenHarmony WLAN module provides abundant peri
## Development
-1. Complete the operations described in [Getting Started with Hi3861](../quick-start/quickstart-lite-introduction-hi3861.md#section19352114194115).
+1. Complete the operations described in [Getting Started with Hi3861](../quick-start/quickstart-lite-overview.md).
- LED control examples are stored in the file **applications/sample/wifi-iot/app/iothardware/led\_example.c**.
+ LED control examples are stored in the file **applications/sample/wifi-iot/app/iothardware/led\_example.c**.
2. Understand the cable connections by referring to the schematic diagram. You can learn that LED of hispark pegasus is connected to pin 9 of the chip.
@@ -73,17 +73,16 @@ Based on the Hi3861 platform, the OpenHarmony WLAN module provides abundant peri
break;
}
}
- return NULL;
}
```
-5. Call **SYS\_RUN\(\)** of OpenHarmony to start the service. \(**SYS\_RUN** is defined in the **ohos\_init.h** file.\)
+5. Call **SYS\_RUN\(\)** of OpenHarmony to start the service. \(**SYS\_RUN** is defined in the **ohos\_init.h** file.\)
```
SYS_RUN(LedExampleEntry);
```
-6. Change the **applications/sample/wifi-iot/app/BUILD.gn** file to enable **led\_example.c** to participate in compilation.
+6. Change the **applications/sample/wifi-iot/app/BUILD.gn** file to enable **led\_example.c** to participate in compilation.
```
import("//build/lite/config/component/lite_component.gni")
@@ -97,10 +96,10 @@ Based on the Hi3861 platform, the OpenHarmony WLAN module provides abundant peri
## Verification
-For details about the compilation and burning processes, see [Building](../quick-start/quickstart-lite-steps-hi3861-building.md) and [Burning](../quick-start/quickstart-lite-steps-hi3861-burn.md) in the _Getting Started with Hi3861_.
+For details about the compilation and burning processes, see [Building](../quick-start/quickstart-lite-steps-hi3861-building.md) and [Burning](../quick-start/quickstart-lite-steps-hi3861-burn.md).
-After the preceding two steps are complete, press the **RST** button to reset the module. If the LED blinks periodically as expected, the verification is passed.
+After the preceding two steps are complete, press the **RST** button to reset the module. If the LED blinks periodically as expected, the verification is passed.
-**Figure 1** LED blinking
+**Figure 1** LED blinking
