1# Component ID 2 3**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. 4 5> **NOTE** 6> 7> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. 8 9 10## Attributes 11 12| Name | Type | Description | 13| -----| -------- | ----------------------------- | 14| id | string | Unique ID you assigned to the component.<br>Default value: **''**<br>Since API version 9, this API is supported in ArkTS widgets.| 15 16 17## APIs 18 19 20### getInspectorByKey<sup>9+</sup> 21 22getInspectorByKey(id: string): string 23 24Obtains all attributes of the component with the specified ID, excluding the information about child components. 25 26This API is used only for test purposes. It is time consuming and not recommended. 27 28**Parameters** 29 30| Name | Type | Mandatory | Description | 31| ---- | -------- | ---- | -------------| 32| id | string | Yes | ID of the component whose attributes are to be obtained.| 33 34**Return value** 35 36| Type | Description | 37| -------| -------------- | 38| string | JSON string of the component attribute list.<br>**NOTE**<br> The string includes the tag, ID, location (relative to the coordinates in the upper left corner of the window), and other information of the component used for testing.| 39 40### getInspectorTree<sup>9+</sup> 41 42getInspectorTree(): Object 43 44Obtains the component tree and component attributes. 45 46This API is used only for test purposes. It is time consuming and not recommended. 47 48**Return value** 49 50| Type | Description | 51| ------ | --------------------------- | 52| Object | JSON object of the component tree and component attribute list.| 53 54### sendEventByKey<sup>9+</sup> 55 56sendEventByKey(id: string, action: number, params: string): boolean 57 58Sends an event to the component with the specified ID. 59 60This API is used only for test purposes. It is time consuming and not recommended. 61 62**Parameters** 63 64| Name | Type | Mandatory | Description | 65| ------ | -------| ---- | -------------------------- | 66| id | string | Yes | ID of the component to which the event is to be sent. | 67| action | number | Yes | Type of the event to be sent. The options are as follows:<br>- **10**: click event.<br>- **11**: long-click event.| 68| params | string | Yes | Event parameters. If there is no parameter, pass an empty string **""**. | 69 70**Return value** 71 72| Type | Description | 73| -------- | --------------------------| 74| boolean | Returns **true** if the component with the specified ID is found; returns **false** otherwise.| 75 76### sendTouchEvent<sup>9+</sup> 77 78sendTouchEvent(event: TouchObject): boolean 79 80Sends a touch event. 81 82This API is used only for test purposes. It is time consuming and not recommended. 83 84**Parameters** 85 86| Name | Type | Mandatory | Description | 87| ----- | ----------- | ---- | ------------------------------------------------------------ | 88| event | [TouchObject](ts-universal-events-touch.md#touchobject) | Yes | Location where a touch event is triggered. For details, see [TouchEvent](ts-universal-events-touch.md#touchevent).| 89 90**Return value** 91 92| Type | Description | 93| ------- | ---------------------------| 94| boolean | Returns **true** if the event is sent successfully; returns **false** otherwise.| 95 96### sendKeyEvent<sup>9+</sup> 97 98sendKeyEvent(event: KeyEvent): boolean 99 100Sends a key event. 101 102This API is used only for test purposes. It is time consuming and not recommended. 103 104**Parameters** 105 106| Name | Type | Mandatory | Description | 107| ----- | -------- | ---- | ------------------------------------------------------------ | 108| event | [KeyEvent](ts-universal-events-key.md#keyevent) | Yes | Key event. For details, see [KeyEvent](ts-universal-events-key.md#keyevent).| 109 110**Return value** 111 112| Type | Description | 113| ------- | ------------------------------| 114| boolean | Returns **true** if the event is sent successfully; returns **false** otherwise.| 115 116### sendMouseEvent<sup>9+</sup> 117 118sendMouseEvent(event: MouseEvent): boolean 119 120Sends a mouse event. 121 122This API is used only for test purposes. It is time consuming and not recommended. 123 124**Parameters** 125 126| Name | Type | Mandatory | Description | 127| ----- | ---------- | ---- | --------------------------------------- | 128| event | [MouseEvent](ts-universal-mouse-key.md#mouseevent) | Yes | Mouse event. For details, see [MouseEvent](ts-universal-mouse-key.md#mouseevent).| 129 130**Return value** 131 132| Type | Description | 133| ------- | ---------------------------------- | 134| boolean | Returns **true** if the event is sent successfully; returns **false** otherwise.| 135 136## Example 137 138```ts 139// xxx.ets 140import { IntentionCode } from '@ohos.multimodalInput.intentionCode' 141 142class Utils { 143 static rect_left: number 144 static rect_top: number 145 static rect_right: number 146 static rect_bottom: number 147 static rect_value: Record<string, number> 148 149 // Obtain the coordinates of the rectangular area occupied by the component. 150 static getComponentRect(key:string):Record<string, number> { 151 let strJson = getInspectorByKey(key) 152 let obj:Record<string, string> = JSON.parse(strJson) 153 console.info("[getInspectorByKey] current component obj is: " + JSON.stringify(obj)) 154 let rectInfo:string[] = JSON.parse('[' + obj.$rect + ']') 155 console.info("[getInspectorByKey] rectInfo is: " + rectInfo) 156 Utils.rect_left = JSON.parse('[' + rectInfo[0] + ']')[0] 157 Utils.rect_top = JSON.parse('[' + rectInfo[0] + ']')[1] 158 Utils.rect_right = JSON.parse('[' + rectInfo[1] + ']')[0] 159 Utils.rect_bottom = JSON.parse('[' + rectInfo[1] + ']')[1] 160 return Utils.rect_value = { 161 "left": Utils.rect_left, "top": Utils.rect_top, "right": Utils.rect_right, "bottom": Utils.rect_bottom 162 } 163 } 164} 165 166@Entry 167@Component 168struct IdExample { 169 @State text: string = '' 170 171 build() { 172 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 173 174 Button() { 175 Text('onKeyTab').fontSize(25).fontWeight(FontWeight.Bold) 176 }.margin({ top: 20 }).backgroundColor('#0D9FFB') 177 .onKeyEvent(() => { 178 this.text = "onKeyTab" 179 }) 180 181 Button() { 182 Text('click to start').fontSize(25).fontWeight(FontWeight.Bold) 183 }.margin({ top: 20 }) 184 .onClick(() => { 185 console.info(getInspectorByKey("click")) 186 console.info(JSON.stringify(getInspectorTree())) 187 this.text = "Button 'click to start' is clicked" 188 setTimeout(() => { 189 sendEventByKey("longClick", 11, "") // Send a long-click event to the component whose ID is "longClick". 190 }, 2000) 191 }).id('click') 192 193 Button() { 194 Text('longClick').fontSize(25).fontWeight(FontWeight.Bold) 195 }.margin({ top: 20 }).backgroundColor('#0D9FFB') 196 .gesture( 197 LongPressGesture().onActionEnd(() => { 198 console.info('long clicked') 199 this.text = "Button 'longClick' is longclicked" 200 setTimeout(() => { 201 let rect = Utils.getComponentRect('onTouch') // Obtain the coordinates of the rectangular area occupied by the component whose ID is "onTouch". 202 let touchPoint: TouchObject = { 203 id: 1, 204 type: TouchType.Down, 205 x: rect.left + (rect.right - rect.left) / 2, // X coordinate relative to the upper left corner of the component. 206 y: rect.top + (rect.bottom - rect.top) / 2, // Y coordinate relative to the upper left corner of the component. 207 screenX: rect.left + (rect.right - rect.left) / 2, // X coordinate relative to the upper left corner of the application window. This API is deprecated since API version 10. Use windowX instead. 208 screenY: rect.left + (rect.right - rect.left) / 2, // Y coordinate relative to the upper left corner of the application window. This API is deprecated since API version 10. Use windowY instead. 209 windowX: rect.left + (rect.right - rect.left) / 2, // X coordinate relative to the upper left corner of the application window. 210 windowY: rect.left + (rect.right - rect.left) / 2, // Y coordinate relative to the upper left corner of the application window. 211 displayX: rect.left + (rect.right - rect.left) / 2, // X coordinate relative to the upper left corner of the device screen. 212 displayY: rect.left + (rect.right - rect.left) / 2, // Y coordinate relative to the upper left corner of the device screen. 213 } 214 sendTouchEvent(touchPoint) // Send a touch event. 215 touchPoint.type = TouchType.Up 216 sendTouchEvent(touchPoint) // Send a touch event. 217 }, 2000) 218 })).id('longClick') 219 220 Button() { 221 Text('onTouch').fontSize(25).fontWeight(FontWeight.Bold) 222 }.type(ButtonType.Capsule).margin({ top: 20 }) 223 .onClick(() => { 224 console.info('onTouch is clicked') 225 this.text = "Button 'onTouch' is clicked" 226 setTimeout(() => { 227 let rect = Utils.getComponentRect('onMouse') // Obtain the coordinates of the rectangular area occupied by the component whose ID is "onMouse". 228 let mouseEvent: MouseEvent = { 229 button: MouseButton.Left, 230 action: MouseAction.Press, 231 x: rect.left + (rect.right - rect.left) / 2, // X coordinate relative to the upper left corner of the component. 232 y: rect.top + (rect.bottom - rect.top) / 2, // Y coordinate relative to the upper left corner of the component. 233 screenX: rect.left + (rect.right - rect.left) / 2, // X coordinate relative to the upper left corner of the application window. This API is deprecated since API version 10. Use windowX instead. 234 screenY: rect.left + (rect.right - rect.left) / 2, // Y coordinate relative to the upper left corner of the application window. This API is deprecated since API version 10. Use windowY instead. 235 windowX: rect.left + (rect.right - rect.left) / 2, // X coordinate relative to the upper left corner of the application window. 236 windowY: rect.left + (rect.right - rect.left) / 2, // Y coordinate relative to the upper left corner of the application window. 237 displayX: rect.left + (rect.right - rect.left) / 2, // X coordinate relative to the upper left corner of the device screen. 238 displayY: rect.left + (rect.right - rect.left) / 2, // Y coordinate relative to the upper left corner of the device screen. 239 stopPropagation: () => { 240 }, 241 timestamp: 1, 242 target: { 243 area: { 244 width: 1, 245 height: 1, 246 position: { 247 x: 1, 248 y: 1 249 }, 250 globalPosition: { 251 x: 1, 252 y: 1 253 } 254 } 255 }, 256 source: SourceType.Mouse, 257 pressure: 1, 258 tiltX: 1, 259 tiltY: 1, 260 sourceTool: SourceTool.Unknown 261 } 262 sendMouseEvent(mouseEvent) // Send a mouse event. 263 }, 2000) 264 }).id('onTouch') 265 266 Button() { 267 Text('onMouse').fontSize(25).fontWeight(FontWeight.Bold) 268 }.margin({ top: 20 }).backgroundColor('#0D9FFB') 269 .onMouse(() => { 270 console.info('onMouse') 271 this.text = "Button 'onMouse' in onMouse" 272 setTimeout(() => { 273 let keyEvent: KeyEvent = { 274 type: KeyType.Down, 275 keyCode: 2049, 276 keyText: 'tab', 277 keySource: 4, 278 deviceId: 0, 279 metaKey: 0, 280 timestamp: 0, 281 stopPropagation: () => { 282 }, 283 intentionCode: IntentionCode.INTENTION_DOWN 284 } 285 sendKeyEvent(keyEvent) // Send a key event. 286 }, 2000) 287 }).id('onMouse') 288 289 Text(this.text).fontSize(25).padding(15) 290 } 291 .width('100%').height('100%') 292 } 293} 294``` 295