Gallery
Once a widget is registered it will be available in the widget gallery.
It is necessary to define the widget gallery configuration extending the class BaseGallery
. Let see the example of the widget MyWidget
in src/examples/MyWidget/MyWidgetGallery.ts
.
In this file is necessary to:
- implement
getDefaultConfiguration
to provide the widget default serialization used when a widget is dropped from gallery - initialize the properties handlers in the
constructor
import { BaseGallery } from 'corvina';
import MyWidgetPropsHandler from './MyWidgetPropsHandler';
class MyWidgetGallery extends BaseGallery {
constructor() {
super();
this.propsHandler = new MyWidgetPropsHandler();
}
getDefaultConfiguration() {
return {
"id": "MyWidget",
"type": "MyWidget",
"class": "MyWidget",
"message": "Hello World",
"linkableProp": 0,
"width": 140,
"height": 40,
"x": 0,
"y": 0,
"cx": 70,
"cy": 20,
}
}
}
export const myWgtGallery = new MyWidgetGallery();
Let see the widget serialization:
- id: the id of the widget (this will be automatically replaced when the widget is dropped onto the dashboard with a unique one)
- type: must be the same as the component name and widget class
- class: must be the same as the component name and widget class
- message: this is the default value for these widget properties
- linkableProp: this is the default value for these widget properties
- width: default width (it will recalculate when the widget is added to the dashboard according to the layout)
- height: default height (it will recalculate when the widget is added to the dashboard according to the layout)
- x: default x position (it will recalculate when the widget is added to the dashboard according to the layout)
- y: default y position (it will recalculate when the widget is added to the dashboard according to the layout)
- cx: default center over x-axis (it will recalculate when the widget is added to the dashboard) according to the layout)
- cy: default center over y-axis (it will recalculate when the widget is added to the dashboard according to the layout)