Graphical Component

The Corvina front-end uses Vue.js and the widget graphics is defined using a Vue.js component. The components in examples use single file components.

info

Currenty use Vue.js at version 2.6.14.

Let see how the default template is structured. You can find it in src/examples/MyWidget folder.

<script>
export default {
  name:"MyWidget",
  props: ["wgt"],
  computed: {
    widgetStyle() {
      return this.wgt.getStyles();
    }
  }
}
</script>

Component Name

The name of the Vue.js component should be the same as the widget class. For example in src/examples/MyWidget.ts the class name is MyWidget

export default class MyWidget extends BaseGraphicWgt

then the component the should be:

export default {
  name:"MyWidget",
  ...
}

Component Props

It is necessary to define a Vue.js prop named wgt. System assigns to this prop the reference to the instance of your widget MyWidget (defined in MyWidget.ts).

export default {
  name:"MyWidget",
  props: ["wgt"],
  ..

Basis Styles

The widget gets the basic style, position and size using the computed property widgetStyle.

<template>
  <div :style="widgetStyle">
    ...
  </div>
</template>

<script>
export default{
  ...
  computed: {
    widgetStyle() {
      return this.wgt.getStyles();
    }
  }
  ...
}
</script>

Component Template

Inside the template section, we can define the widget visualization. Here you can access the properties, defined in MyWidget.ts, using the function getPropertyValue.

<template>
  <div :style="widgetStyle">
    <div class="center">
      <h1>SDK Widget</h1>
      <h2>
        {{ wgt.getPropertyValue( "message") }}
        :
        {{ wgt.getPropertyValue( "linkableProp" ) }}
      </h2>
      <div class="info-exor">
        <h3>Example by</h3>
        <img class="icon" :src="myicon"></img>
      </div>
    </div>
  </div>
</template>

Or you can define some computed props.

<template>
  <div :style="widgetStyle">
    <div class="center">
      <h1>SDK Widget</h1>
      <h2>{{message}}:{prop}}</h2>
      <div class="info-exor">
        <h3>Example by</h3>
        <img class="icon" :src="myicon"></img>
      </div>
    </div>
  </div>
</template>

<script>
export default{
  ...
  computed: {
   ...
    message() {
      return this.wgt.getPropertyValue( "message");
    },
    prop() {
      return this.wgt.getPropertyValue( "linkableProp" );
    }
  }
  ...
}
</script>

Everything is reactive. It means that the graphic automatically updates according to the values of linkableProp and message.

Images and static resources

Static resources, like images, should be imported inside a Vue.js component using the require function to get resources from local path.

const iconPath = require( "./resources/images/logo.png" );

When you need to used this resource is necessary to apply the global function adjustPath to resolve correctly the path.

data: function() {
  return {
    myicon: adjustPath( iconPath )
  }
}

The reason of this is that when the widget will be deployed this kind of resources are stored in a object storage service. Since the object storage is a remote service the widget needs to resolve correctly the remote path from the local path used during development.