ts-universal-attributes-component-id.md

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

The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.

Attributes

Name	Type	Description
id	string	Unique ID you assigned to the component. Default value: ''

APIs

getInspectorByKey⁹⁺

getInspectorByKey(id: string): string

Obtains all attributes of the component with the specified ID, excluding the information about child components.

Parameters

Name	Type	Mandatory	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.

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⁹⁺

sendEventByKey(id: string, action: number, params: string): boolean

Sends an event to the component with the specified ID.

Parameters

Name	Type	Mandatory	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	Description
event	TouchObject	Yes	Location where a touch event is triggered. For details, see 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	Description
event	KeyEvent	Yes	Key event. For details, see 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	Description
event	MouseEvent	Yes	Mouse event. For details, see MouseEvent.

Return value

Type	Description
boolean	Returns true if the event is sent successfully; returns false otherwise.

Example

// xxx.ets
class Utils {
  static rect_left
  static rect_top
  static rect_right
  static rect_bottom
  static rect_value

  // Obtain the coordinates of the rectangular area occupied by the component.
  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('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, "") // Send a long-click event to the component whose ID is "longClick".
        }, 2000)
      }).id('click')

      Button() {
        Text('longClick').fontSize(25).fontWeight(FontWeight.Bold)
      }.margin({ top: 20 }).backgroundColor('#0D9FFB')
      .gesture(
      LongPressGesture().onActionEnd(() => {
        console.info('long clicked')
        this.text = "Button 'longClick' is longclicked"
        setTimeout(() => {
          let rect = Utils.getComponentRect('onTouch') // Obtain the coordinates of the rectangular area occupied by the component whose ID is "onTouch".
          let touchPoint: TouchObject = {
            id: 1,
            x: rect.left + (rect.right - rect.left) / 2, // X coordinate of the component center.
            y: rect.top + (rect.bottom - rect.top) / 2, // Y coordinate of the component center.
            type: TouchType.Down,
            screenX: rect.left + (rect.right - rect.left) / 2, // X coordinate of the component center.
            screenY: rect.left + (rect.right - rect.left) / 2, // Y coordinate of the component center.
          }
          sendTouchEvent(touchPoint) // Send a touch event.
          touchPoint.type = TouchType.Up
          sendTouchEvent(touchPoint) // Send a touch event.
        }, 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') // Obtain the coordinates of the rectangular area occupied by the component whose ID is "onMouse".
          let mouseEvent: MouseEvent = {
            button: MouseButton.Left,
            action: MouseAction.Press,
            x: rect.left + (rect.right - rect.left) / 2, // X coordinate of the component center.
            y: rect.top + (rect.bottom - rect.top) / 2, // Y coordinate of the component center.
            screenX: rect.left + (rect.right - rect.left) / 2, // X coordinate of the component center.
            screenY: rect.top + (rect.bottom - rect.top) / 2, // Y coordinate of the component center.
            timestamp: 1,
            target: {
              area: {
                width: 1,
                height: 1,
                position: {
                  x: 1,
                  y: 1
                },
                globalPosition: {
                  x: 1,
                  y: 1
                }
              }
            },
            source: SourceType.Mouse,
            pressure: 1,
            tiltX: 1,
            tiltY: 1,
            sourceTool: SourceTool.Unknown
          }
          sendMouseEvent(mouseEvent) // Send a mouse event.
        }, 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) // Send a key event.
        }, 2000)
      }).id('onMouse')

      Text(this.text).fontSize(25).padding(15)
    }
    .width('100%').height('100%')
  }
}