diff --git a/en/application-dev/reference/arkui-ts/Readme-EN.md b/en/application-dev/reference/arkui-ts/Readme-EN.md index 92e6008b08061bba04d6a39085e5b21f30f4d0be..2c6cea49567c3fd4f888983ae387191d3ef3dcf7 100644 --- a/en/application-dev/reference/arkui-ts/Readme-EN.md +++ b/en/application-dev/reference/arkui-ts/Readme-EN.md @@ -58,14 +58,16 @@ - [Gauge](ts-basic-components-gauge.md) - [Image](ts-basic-components-image.md) - [ImageAnimator](ts-basic-components-imageanimator.md) + - [Marquee](ts-basic-components-marquee.md) - [LoadingProgress](ts-basic-components-loadingprogress.md) - [Progress](ts-basic-components-progress.md) - [QRCode](ts-basic-components-qrcode.md) - [Radio](ts-basic-components-radio.md) - [Rating](ts-basic-components-rating.md) - - [Select](ts-basic-components-rating.md) - - [Span](ts-basic-components-span.md) + - [Search](ts-basic-components-search.md) + - [Select](ts-basic-components-select.md) - [Slider](ts-basic-components-slider.md) + - [Span](ts-basic-components-span.md) - [Text](ts-basic-components-text.md) - [TextArea](ts-basic-components-textarea.md) - [TextInput](ts-basic-components-textinput.md) @@ -73,6 +75,9 @@ - [TextTimer](ts-basic-components-texttimer.md) - [Toggle](ts-basic-components-toggle.md) - [TextClock](ts-basic-components-textclock.md) + - [Web](ts-basic-components-web.md) + - [RichText](ts-basic-components-richtext.md) + - [Xcomponent](ts-basic-components-xcomponent.md) - [PluginComponent](ts-basic-components-plugincomponent.md) - Container Components - [AlphabetIndexer](ts-container-alphabet-indexer.md) @@ -93,6 +98,7 @@ - [RowSplit](ts-container-rowsplit.md) - [Scroll](ts-container-scroll.md) - [ScrollBar](ts-basic-components-scrollbar.md) + - [SideBarContainer](ts-container-sidebarcontainer.md) - [Stack](ts-container-stack.md) - [Swiper](ts-container-swiper.md) - [Tabs](ts-container-tabs.md) diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-xcomponent.md b/en/application-dev/reference/arkui-ts/ts-basic-components-xcomponent.md new file mode 100644 index 0000000000000000000000000000000000000000..f8e557dac894954cdef0c4fa0f9b5a6c336cedc2 --- /dev/null +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-xcomponent.md @@ -0,0 +1,116 @@ +# XComponent + + > ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** + > This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. + + The **\** can accept and display the EGL/OpenGLES and media data input. + +## Required Permissions + + None + +## Child Components + + Not supported + +## APIs + + XComponent\(value: {id: string, type: string, libraryname?: string, controller?: XComponentController}\) + + - Name + + | 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.
This API is defined but not implemented in OpenHarmony 3.1 Release. It will be available for use in OpenHarmony 3.1 MR.| + | libraryname | string | No | Name of the dynamic library generated after compilation at the application native layer. | + | controller | [XComponentController](#XComponentController) | No | Controller bound to the component, which can be used to invoke methods of the component. | + + +## Events + +| Name | Description | +| ------------------------------- | ------------------------ | +| onLoad(context?: object) => void | Triggered when the plug-in is loaded.| +| onDestroy() => void | Triggered when the plug-in is destroyed.| + +## XComponentController + +Defines the controller of the **\**. You can bind the controller to the **\** to invoke the component methods through the controller. + +### Creating an Object + +``` +xcomponentController: XComponentController = new XComponentController() +``` + +### getXComponentSurfaceId + +getXComponentSurfaceId(): string + +Obtains the ID of the surface held by the **\**. The ID can be used for @ohos interfaces, such as camera-related interfaces. + + - Return value + + | Type | Description | + | ------ | --------------------------- | + | string | ID of the surface held by the **\**.| + +### setXComponentSurfaceSize + +setXComponentSurfaceSize(value: {surfaceWidth: number, surfaceHeight: number}): void + +Sets the width and height of the surface held by the **\**. + +- Parameters + + | Name | Type| Mandatory| Default Value| Description | + | ------------- | -------- | ---- | ------ | ----------------------------- | + | surfaceWidth | number | Yes | - | Width of the surface held by the **\**.| + | surfaceHeight | number | Yes | - | Height of the surface held by the **\**.| + +### getXComponentContext + +getXComponentContext(): Object + +Obtains the context of an **\** object. + +- Return value + + | Type | Description | + | ------ | ------------------------------------------------------------ | + | Object | Context of an **\** object. The APIs contained in the context are defined by developers. | + +## Example + +Provide a surface-type **\** to support capabilities such as camera preview. + +``` +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}) + } +} +``` diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components.md b/en/application-dev/reference/arkui-ts/ts-basic-components.md index 657554b6f2feb37910b9991e8ecb79cf0ec8812c..e36410962c24eec65a7710901de82a9e43001c3c 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components.md @@ -1,39 +1,33 @@ # Basic Components - - -- **[Blank](ts-basic-components-blank.md)** - -- **[Button](ts-basic-components-button.md)** - -- **[DataPanel](ts-basic-components-datapanel.md)** - -- **[DatePicker](ts-basic-components-datepicker.md)** - -- **[Divider](ts-basic-components-divider.md)** - -- **[Image](ts-basic-components-image.md)** - -- **[ImageAnimator](ts-basic-components-imageanimator.md)** - -- **[Progress](ts-basic-components-progress.md)** - -- **[QRCode](ts-basic-components-qrcode.md)** - -- **[Rating](ts-basic-components-rating.md)** - -- **[Span](ts-basic-components-span.md)** - -- **[Slider](ts-basic-components-slider.md)** - -- **[Text](ts-basic-components-text.md)** - -- **[TextArea](ts-basic-components-textarea.md)** - -- **[TextInput](ts-basic-components-textinput.md)** - -- **[TextPicker](ts-basic-components-textpicker.md)** - -- **[TextTimer](ts-basic-components-texttimer.md)** - -- **[Toggle](ts-basic-components-toggle.md)** \ No newline at end of file +- [Blank](ts-basic-components-blank.md) +- [Button](ts-basic-components-button.md) +- [Checkbox](ts-basic-components-checkbox.md) +- [CheckboxGroup](ts-basic-components-checkboxgroup.md) +- [DataPanel](ts-basic-components-datapanel.md) +- [DatePicker](ts-basic-components-datepicker.md) +- [Divider](ts-basic-components-divider.md) +- [Gauge](ts-basic-components-gauge.md) +- [Image](ts-basic-components-image.md) +- [ImageAnimator](ts-basic-components-imageanimator.md) +- [Marquee](ts-basic-components-marquee.md) +- [LoadingProgress](ts-basic-components-loadingprogress.md) +- [Progress](ts-basic-components-progress.md) +- [QRCode](ts-basic-components-qrcode.md) +- [Radio](ts-basic-components-radio.md) +- [Rating](ts-basic-components-rating.md) +- [Search](ts-basic-components-search.md) +- [Select](ts-basic-components-select.md) +- [Slider](ts-basic-components-slider.md) +- [Span](ts-basic-components-span.md) +- [Text](ts-basic-components-text.md) +- [TextArea](ts-basic-components-textarea.md) +- [TextInput](ts-basic-components-textinput.md) +- [TextPicker](ts-basic-components-textpicker.md) +- [TextTimer](ts-basic-components-texttimer.md) +- [Toggle](ts-basic-components-toggle.md) +- [TextClock](ts-basic-components-textclock.md) +- [Web](ts-basic-components-web.md) +- [RichText](ts-basic-components-richtext.md) +- [Xcomponent](ts-basic-components-xcomponent.md) +- [PluginComponent](ts-basic-components-plugincomponent.md) \ No newline at end of file