Для создания плагина:
в веб-приложении и конструкторе бизнес-приложений создайте файлы плагина:
<наименование плагина>.js. Скрипт плагина, написанный на языке программирования JavaScript;
<наименование плагина>.css. Стили плагина.
При написании скрипта плагина используйте следующие шаблоны:
// Зададим блок регистрации
(function ()
{
if (window.Kap)
{
Kap.regPluginBlock({
Id: "MyLabel", //идентификатор, по которому происходит связка плагин-блока с его реализацией
Name: "MyLabelText", //наименование типа блока
View: "PP.Ui.Dashboard.MyLabel", //класс визуализатора или имя класса визуализатора
Icon: "../build/img/app/MainIcon.png", //путь к пиктограмме (16*16) для плагина, необязательный параметр
SourceClass: PP.Mb.MetabaseObjectClass.KE_CLASS_EXPRESSREPORT, //тип или код класса источника данных
Js: "../plugins/MyLabel.js", //для динамической загрузки скрипта с реализацией плагина, обязательный параметр
Master: "PP.Ui.MyMaster", //класс мастера или имя класса мастера
Props: { //дополнительные параметры плагина для установки значений по умолчанию, необязательный параметр
pluginProps: {}
}
});
}
})();
if (!PP.Ui.MyLabel)
{
PP.Ui.MyLabel = {};
PP.initNamespace(PP.Ui.MyLabel, "PP.Ui.MyLabel");
}
// Создадим прототип своего визуализатора для регистрируемого блока
PP.Ui.MyLabel = function(settings) {
this._Source = null;
this._bgFlag = false;
this.PropertyChanged = new PP.Delegate();
this.Refreshed = new PP.Delegate();
PP.Ui.MyLabel.base.constructor.apply(this, arguments);
this.setContent("MyLabelText");
};
PP.initClass(PP.Ui.MyLabel, PP.Ui.Label, "PP.Ui.MyLabel");
var Plugin = PP.Ui.MyLabel.prototype;
Plugin._propertyChangedFire = function () {
this.PropertyChanged.fire(this);
};
Plugin._refreshedFire = function () {
console.log("My Label Refreshed");
this.Refreshed.fire(this);
};
// Если плагин должен поддерживать работу с источником данных, то
// установим источник визуализатору, который открыт в аналитической панели
Plugin.setSource = function(source) {
this._Source = source;
this.setContent("Source loaded: " + this._Source.getId());
this._refreshedFire();
};
// Если плагин должен поддерживать хранимые свойства зададим методы setProps и getProps
Plugin.setProps = function(value) { //метод установки хранимых свойств блока
if (value) {
var props = JSON.parse(value);
this._bgFlag = props.bgFlag ? props.bgFlag : false;
} else {
this._bgFlag = false;
}
this.refresh();
};
Plugin.getProps = function() { //метод, предоставляющий аналитической панели свойства для сохранения
var props = {
bgFlag: this._bgFlag
};
return JSON.stringify(props);
};
Plugin.refresh = function() {
this._DomNode.style.backgroundColor = this._bgFlag ? "green" : "transparent";
this._refreshedFire();
};
Plugin.refreshAll = function () { //метод вызывается при обновлении блока с отчётом
};
Plugin.setWidth = function () {
if (this._Instance) this._redraw();
};
Plugin.setHeight = function () {
if (this._Instance) this._redraw();
};
// Если плагин должен иметь собственное контекстное меню зададим метод getContextMenu
Plugin.getContextMenu = function() {
var _DataView = this;
var menu = new PP.Ui.Menu({
Items : [ {
MenuItem : {
Id : "pluginMenuItem",
Content : "plugin menu item",
Checked : _DataView._bgFlag,
CheckedChanged : function(sender, args) {
_DataView._bgFlag = sender.getChecked();
_DataView.refresh();
}
}
}]
});
return menu;
};
// Создадим прототип мастера для регистрируемого блока
PP.Ui.MyMaster = function(settings) {
this._DataView;
PP.Ui.MyMaster.base.constructor.apply(this, arguments);
var myPanel = new PP.Ui.MasterPanel(
{
Id: "MyPluginMaster",
ViewType: PP.Ui.NavigationItem,
Content: "Plugin settings...",
Title: "My plugin master"
});
myPanel.getHeaderControl().CheckedChanged.add(this._onPropsChanged, this);
this.addMasterPanel(myPanel);
};
PP.initClass(PP.Ui.MyMaster, PP.Ui.Master, "PP.Ui.MyMaster");
var Master = PP.Ui.MyMaster.prototype;
// Если для плагина должны отображаться дополнительные вкладки боковой панели, содержащие его настройки,
// то зададим реализацию метода setDataView(view), где view - это экземпляр визуализатора плагина.
// Дополнительно зададим свойство Master в блоке регистрации
Master.setDataView = function(view) {
this._DataView = view;
for (var i = 0; i < this.getItems().length; i++) {
var item = this.getItem(i);
if (item.getId() === "MyPluginMaster") {
item.setTitle("My plugin master. Data view type: " + view.getTypeName());
if (view._bgFlag) {
item.getHeaderControl().setChecked(view._bgFlag, false);
}
}
}
};
Master._onPropsChanged = function(sender, args) {
this._DataView._bgFlag = args.CheckedState;
this._DataView._propertyChangedFire();
this._DataView.refresh();
};
Ниже приведены примеры методов и функций, входящих в структуру скрипта плагина, которые могут быть использованы для решения следующих задач:
Построение плагина, источником данных которого является отчёт
Получение данных визуализатора в плагине, источником данных которого является отчёт
Получение отметки измерения в плагине, источником данных которого является экспресс-отчёт
Настройка синхронизации измерений источника данных плагина с источниками данных других объектов
Выполнение Fore-функции в плагине и получение результата выполнения в консоли браузера
/* <outputFile name="PP.MyLabel.js" /> */
(function ()
{
})();
if (!PP.Ui.Prx)
{
PP.Ui.Prx = {};
PP.initNamespace(PP.Ui.Prx, "PP.Ui.Prx");
}
PP.Ui.Prx.MyLabel = function (settings)
{
this._Instance = null;
this._Source = settings.Source;
PP.Ui.Prx.MyLabel.base.constructor.apply(this, arguments);
this._defineEvents(["PropertyChanged", "MetadataChanged"]);
if (!this.getDomNode())
this._initFromHTML("<div id='" + this.getId() + "' style='position: absolute; top: 0; right: 0; bottom: 0; left: 0;'></div>");
};
PP.initClass(PP.Ui.Prx.MyLabel, PP.Ui.Control, "PP.Ui.Prx.MyLabel");
var Plugin = PP.Ui.Prx.MyLabel.prototype;
Plugin.refresh = function (args) { //метод вызывается из отчёта при обновлении листа плагина
this._Instance = new Object();
};
Plugin.setProps = function (props) { //метод вызывается для установки пользовательских настроек
};
Plugin.getProps = function () { //метод вызывается для сохранения пользовательских настроек
};
Plugin.setSource = function (source) { //метод устанавливает источник данных - модель регламентного отчёта
this._Source = source;
};
Plugin.setWidth = function (w){
};
Plugin.setHeight = function (h){
};
Plugin = null;
Важно. Для преднастроенных плагинов зарезервированы идентификаторы: PP.Ui.Dashboard.Sankey - «Sankey-диаграмма»; PP.Ui.Dashboard.Gantt - «Диаграмма Ганта»; PP.Ui.Dashboard.Indicator - «Индикатор». При создании пользовательского плагина используйте идентификатор, отличный от зарезервированных.
в настольном приложении создайте объекты, написанные на языке программирования Fore, в среде разработки:
Создайте форму-визуализатор. Данная форма содержит компоненты, образующие внешний вид плагина, и код, описывающий логику работы компонентов в плагине. Форма-визуализатор должна наследоваться от класса AdhocUserViewForm. Особенности кода формы-визуализатора:
если плагин должен поддерживать хранимые свойства, то создайте реализацию методов AdhocUserViewForm.SaveSettings и AdhocUserViewForm.LoadSettings;
если плагин должен поддерживать определенные источники данных, то создайте реализацию свойства AdhocUserViewForm.SupportedSource с указанием в нем требуемых источников данных с помощью перечисления MetabaseObjectClass.
Создайте форму-мастер. Данная форма содержит компоненты, образующие вкладки боковой панели для настройки плагина, и код, описывающий логику применения настроек к плагину. Форма-мастер должна наследоваться от класса AdhocUserMasterForm.
После выполнения действий плагин будет создан в навигаторе объектов в качестве формы-визуализатора и формы-модуля.
Примечание. Плагин, написанный на языке программирования Fore, используется только для подключения к аналитической панели в настольном приложении.
После выполнения действий будет создан плагин, доступный для подключения к аналитической панели, регламентному отчёту и форме ввода.
См. также:
Плагины | Подключение плагина к аналитической панели | Подключение плагина к регламентному отчёту