XComponent
NOTE
This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
The <XComponent> can accept and display the EGL/OpenGL ES and media data input.
Required Permissions
None
Child Components
Not supported
APIs
XComponent(value: {id: string, type: string, libraryname?: string, controller?: XComponentController})
Parameters
Name | Type | Mandatory | Description |
---|---|---|---|
id | string | Yes | Unique ID of the component. The value can contain a maximum of 128 characters. |
type | string | Yes | Type of the component. The options are as follows: -surface: The content of this component is displayed individually, without being combined with that of other components. -component: The content of this component is displayed after having been combined with that of other components. |
libraryname | string | No | Name of the dynamic library generated after compilation at the application native layer. |
controller | XComponentcontroller | No | Controller bound to the component, which can be used to invoke methods of the component. |
Events
onLoad
onLoad(callback: (event?: object) => void )
Triggered when the plug-in is loaded.
Parameters
Name | Type | Mandatory | Description |
---|---|---|---|
event | object | No | Context of the <XComponent> object. The APIs contained in the context are defined at the C++ layer by developers. |
onDestroy
onDestroy(event: () => void )
Triggered when the plug-in is destroyed.
XComponentController
Defines the controller of the <XComponent>. You can bind the controller to the <XComponent> to invoke the component methods through the controller.
Creating an Object
xcomponentController: XComponentController = new XComponentController()
getXComponentSurfaceId
getXComponentSurfaceId()
Obtains the ID of the surface held by the <XComponent>. The ID can be used for @ohos interfaces, such as camera-related interfaces.
System API: This is a system API.
Return value
Type | Description |
---|---|
string | ID of the surface held by the <XComponent>. |
setXComponentSurfaceSize
setXComponentSurfaceSize(value: {surfaceWidth: number, surfaceHeight: number})
Sets the width and height of the surface held by the <XComponent>.
System API: This is a system API.
Parameters
Name | Type | Mandatory | Description |
---|---|---|---|
surfaceWidth | number | Yes | Width of the surface held by the <XComponent>. |
surfaceHeight | number | Yes | Height of the surface held by the <XComponent>. |
getXComponentContext
getXComponentContext()
Obtains the context of an <XComponent> object.
Return value
Type | Description |
---|---|
Object | Context of the <XComponent> object. The APIs contained in the context are defined by developers. |
Example
Provide a surface-type <XComponent> to support capabilities such as camera preview. You can preview how this component looks on a real device. The preview is not yet available in the DevEco Studio Previewer.
// xxx.ets
import camera from '@ohos.multimedia.camera';
@Entry
@Component
struct PreviewArea {
private surfaceId : string =''
xcomponentController: XComponentController = new XComponentController()
build() {
Row() {
XComponent({
id: 'xcomponent',
type: 'surface',
controller: this.xcomponentController
})
.onLoad(() => {
this.xcomponentController.setXComponentSurfaceSize({surfaceWidth:1920,surfaceHeight:1080});
this.surfaceId = this.xcomponentController.getXComponentSurfaceId();
camera.createPreviewOutput(this.surfaceId).then((previewOutput) => {
console.log('Promise returned with the PreviewOutput instance');
})
})
.width('640px')
.height('480px')
}
.backgroundColor(Color.Black)
.position({x: 0, y: 48})
}
}