PluginComponent

NOTE

• This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.

• The APIs of this module are system APIs and cannot be called by third-party applications.

<PluginComponent> allows the UI provided by an external application to be displayed in the application.

Required Permissions

None

Child Components

None

APIs

PluginComponent(value: { template: PluginComponentTemplate, data: any })

Creates a PluginComponent to display the UI provided by an external application.

• Parameters

• PluginComponentTemplate parameters

Events

PluginComponentManager

Provides APIs for the PluginComponent. You can use these APIs to request components and data and send component templates and data.

Modules to Import

import pluginComponentManager from '@ohos.plugincomponent'

Required Permissions

None

push

push(param: PushParameters, callback: AsyncCallback<void>): void

Used by the component provider to send the component and data to the component consumer.

• Parameters

• Description of PushParameters

• Example For details, see APIs Called by Component Consumers.

request

request(param: RequestParameters, callback: AsyncCallback<RequestCallbackParameters>): void

Used by the component consumer to request the component from the component provider.

• Parameters

• Description of RequestParameters

• Description of RequestCallbackParameters

• Description of KVObject

• Example For details, see APIs Called by Component Consumers.

on

on(eventType: string, callback: OnPushEventCallback | OnRequestEventCallback): void

Listens for events of the request type and returns the requested data, or listens for events of the push type and receives the data pushed by the provider.

• Parameters

• Description of callback

• Description of RequestEventResult

• Example For details, see APIs Called by Component Consumers.

Example

Using the PluginComponent

import plugin from "../../test/plugin_component.js"
import plugincomponent from '@ohos.plugincomponent'

@Entry
@Component
struct PluginComponentExample {
  @StorageLink("plugincount") plugincount: Object[] = [
    { source: 'plugincomponent1', ability: 'com.example.plugin' },
    { source: 'plugintemplate', ability: 'com.example.myapplication' },
    { source: 'plugintemplate', ability: 'com.example.myapplication' }]

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Text('Hello World')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Button('Push')
        .fontSize(50)
        .width(400)
        .height(100)
        .onClick(() => {
          plugin.Push()
          console.log("Button('Push')")
        })
        .margin({ top: 20 })
      Button('Request1')
        .fontSize(50)
        .width(400)
        .height(100)
        .margin({ top: 20 })
        .onClick(() => {
          plugin.Request1()
          console.log("Button('Request1')")
        })
      Button('Request2')
        .fontSize(50)
        .width(400)
        .height(100)
        .margin({ top: 20 })
        .onClick(() => {
          plugin.Request2()
          console.log("Button('Request2')")
        })
      ForEach(this.plugincount, item => {
        PluginComponent({
          template: { source: 'plugincomponent1', ability: 'com.example.plugin' },
          data: { 'countDownStartValue': 'new countDownStartValue' }
        }).size({ width: 500, height: 100 })
          .onComplete(() => {
            console.log("onComplete")
          })
          .onError(({errcode, msg}) => {
            console.log("onComplete" + errcode + ":" + msg)
          })
      })
    }
    .width('100%')
    .height('100%')
}

APIs Called by Component Consumers

import pluginComponentManager from '@ohos.plugincomponent'

function onPushListener(source, template, data, extraData) {
  console.log("onPushListener template.source=" + template.source)
  var jsonObject = JSON.parse(data.componentTemplate.source)
  console.log("request_callback1:source json object" + jsonObject)
  var jsonArry = jsonObject.ExternalComponent
  for (var i in jsonArry) {
    console.log(jsonArry[i])
  }
  console.log("onPushListener:source json object" + jsonObject)
  console.log("onPushListener:source json string" + JSON.stringify(jsonObject))
  console.log("onPushListener template.ability=" + template.ability)
  console.log("onPushListener data=" + JSON.stringify(data))
  console.log("onPushListener extraData=" + JSON.stringify(extraData))
}

export default {
  //register listener
  onListener() {
    pluginComponentManager.on("push", onPushListener)
  },
  Request() {
 //The component consumer proactively sends data.
    pluginComponentManager.request({
        want: {
          bundleName: "com.example.myapplication",
          abilityName: "com.example.myapplication.MainAbility",
        },
        name: "plugintemplate",
        data: {
          "key_1": "plugin component test",
          "key_2": 34234
        },
        jsonPath: "assets/js",
      },
      (err, data) => {
        console.log("request_callback1: componentTemplate.ability=" + data.componentTemplate.ability)
        console.log("request_callback1: componentTemplate.source=" + data.componentTemplate.source)
        var jsonObject = JSON.parse(data.componentTemplate.source)
        console.log("request_callback1:source json object" + jsonObject)
        var jsonArry = jsonObject.ExternalComponent
        for (var i in jsonArry) {
          console.log(jsonArry[i])
        }
        console.log("request_callback1:source json string" + JSON.stringify(jsonObject))
        console.log("request_callback1: data=" + JSON.stringify(data.data))
        console.log("request_callback1: extraData=" + JSON.stringify(data.extraData))
      }
    )
  }
}

// Example of the component provider using the API
import pluginComponentManager from '@ohos.plugincomponent'

function onRequestListener(source, name, data) {
  console.log("onRequestListener name=" + name)
  console.log("onRequestListener data=" + JSON.stringify(data))
  return { template: "plugintemplate", data: data }
}

export default {
  //register listener
  onListener() {
    pluginComponentManager.on("request", onRequestListener)
  },
  Push() {
    // The component provider proactively sends data.
    pluginComponentManager.push(
      {
        want: {
          bundleName: "com.example.myapplication",
          abilityName: "com.example.myapplication.MainAbility",
        },
        name: "plugintemplate",
        data: {
          "key_1": "plugin component test",
          "key_2": 34234
        },
        extraData: {
          "extra_str": "this is push event"
        },
        jsonPath: "assets/js",
      },
      (err, data) => {
        console.log("push_callback1: componentTemplate.ability=" + data.componentTemplate.ability)
        console.log("push_callback1: componentTemplate.source=" + data.componentTemplate.source)
        console.log("push ok!")
      }
    )
  },
}