1# XComponent 2 3The **\<XComponent>** can accept and display the EGL/OpenGL ES and media data input. 4 5> **NOTE** 6> 7> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. 8 9 10## Child Components 11Child components are not supported when **type** is set to **"surface"**. 12 13Since API version 9, child components are supported when **type** is set to **"component"**. 14 15## APIs 16 17XComponent(value: {id: string, type: string, libraryname?: string, controller?: XComponentController}) 18 19**Parameters** 20 21| Name | Type | Mandatory | Description | 22| ----------- | ---------------------------------------- | ---- | ---------------------------------------- | 23| id | string | Yes | Unique ID of the component. The value can contain a maximum of 128 characters. | 24| type | string | Yes | Type of the component. The options are as follows:<br>- **"surface"**: The content of the component is displayed individually, without being combined with that of other components. This option is used for displaying EGL/OpenGL ES and media data.<br>- **"component"**<sup>9+</sup>: The component becomes a container where non-UI logic can be executed to dynamically load the display content.| 25| libraryname | string | No | Name of the dynamic library generated after compilation at the application native layer. This parameter is valid only when the component type is **"surface"**.| 26| controller | [XComponentcontroller](#xcomponentcontroller) | No | Controller bound to the component, which can be used to invoke methods of the component. This parameter is valid only when the component type is **"surface"**.| 27 28> **NOTE** 29> 30> When **type** is set to **"component"**, the **\<XComponent>** functions as a container, where child components are laid out vertically. 31> 32> - Vertical alignment: [FlexAlign](ts-appendix-enums.md#flexalign).Start 33> - Horizontal alignment: [FlexAlign](ts-appendix-enums.md#flexalign).Center 34> 35> The component does not respond to any events. 36> 37> Layout changes and event responses can be set by mounting child components. 38> 39> The non-UI logic written internally needs to be encapsulated in one or more functions. 40 41## Attributes 42- You can customize the content displayed in the **\<XComponent>**. Among the universal attributes, the [background](./ts-universal-attributes-background.md), [opacity](./ts-universal-attributes-opacity.md), and [image effects](./ts-universal-attributes-image-effect.md) attributes are not supported. 43- When **type** is set to **"surface"**, you are advised to use the APIs provided by the EGL/OpenGL ES to set the display content. 44- When **type** is set to **"component"**, you are advised to mount child components to set the display content. 45 46## Events 47 48The following events are supported only when **type** is set to **"surface"**. The [universal events](ts-universal-events-click.md) and [universal gestures](ts-gesture-settings.md) are not supported. 49 50### onLoad 51 52onLoad(callback: (event?: object) => void ) 53 54Triggered when the plug-in is loaded. 55 56**Parameters** 57 58| Name | Type | Mandatory | Description | 59| ----- | ------ | ---- | ---------------------------------------- | 60| event | object | No | Context of the **\<XComponent>** object. The APIs contained in the context are defined at the C++ layer by developers.| 61 62### onDestroy 63 64onDestroy(event: () => void ) 65 66Triggered when the plug-in is destroyed. 67 68## XComponentController 69 70Defines the controller of the **\<XComponent>**. You can bind the controller to the **\<XComponent>** to invoke the methods of the component through the controller. 71 72### Creating an Object 73 74``` 75xcomponentController: XComponentController = new XComponentController() 76``` 77 78### getXComponentSurfaceId 79 80getXComponentSurfaceId(): string 81 82Obtains the ID of the surface held by the **\<XComponent>**. The ID can be used for @ohos interfaces. For details, see [Camera Management](../apis/js-apis-camera.md). This API works only when **type** of the **\<XComponent>** is set to **"surface"**. 83 84 85**Return value** 86 87| Type | Description | 88| ------ | ----------------------- | 89| string | ID of the surface held by the **\<XComponent>**.| 90 91 92### setXComponentSurfaceSize 93 94setXComponentSurfaceSize(value: {surfaceWidth: number, surfaceHeight: number}): void 95 96Sets the width and height of the surface held by the **\<XComponent>**. This API works only when **type** of the **\<XComponent>** is set to **"surface"**. 97 98 99**Parameters** 100 101| Name | Type | Mandatory | Description | 102| ------------- | ------ | ---- | ----------------------- | 103| surfaceWidth | number | Yes | Width of the surface held by the **\<XComponent>**.| 104| surfaceHeight | number | Yes | Height of the surface held by the **\<XComponent>**.| 105 106 107### getXComponentContext 108 109getXComponentContext(): Object 110 111Obtains the context of an **\<XComponent>** object. This API works only when **type** of the **\<XComponent>** is set to **"surface"**. 112 113**Return value** 114 115| Type | Description | 116| ------ | ---------------------------------------- | 117| Object | Context of the **\<XComponent>** object. The APIs contained in the context are defined by developers.| 118 119 120## Example 121 122You can preview how this component looks on a real device. The preview is not yet available in the DevEco Studio Previewer. 123 124```ts 125// xxx.ets 126@Entry 127@Component 128struct PreviewArea { 129 private surfaceId : string ='' 130 xcomponentController: XComponentController = new XComponentController() 131 build() { 132 Row() { 133 XComponent({ 134 id: 'xcomponent', 135 type: 'surface', 136 controller: this.xcomponentController 137 }) 138 .onLoad(() => { 139 this.xcomponentController.setXComponentSurfaceSize({surfaceWidth:1920,surfaceHeight:1080}); 140 this.surfaceId = this.xcomponentController.getXComponentSurfaceId() 141 }) 142 .width('640px') 143 .height('480px') 144 } 145 .backgroundColor(Color.Black) 146 .position({x: 0, y: 48}) 147 } 148} 149``` 150