Для выполнения примера необходимо создать html-страницу и выполнить следующие действия:
1. Добавить ссылки на следующие css-файлы: PP.css, PP.Express.css.
Также нужно добавить ссылки на js-файлы: PP.js, PP.Metabase.js, PP.Express.js и resources.ru.js.
2. Затем в теге <head> дополнительно задаётся стиль для элементов:
<style type="text/css">
body, html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
3. Далее в теге <head> необходимо добавить скрипт, создающий контейнер для ленты инструментов экспресс-отчета EaxRibbon:
var metabase, eaxAnalyzer, eaxMbService, settings, ribbon, waiter, saveAsD, openD, eaxGrid;
var IMAGE_PATH = "../Img/";
function createView(source, service) {
// Создаем компонент Waiter
eaxGrid = new PP.Exp.Ui.EaxGrid({
ParentNode: document.body,
Source: eaxAnalyzer,
Service: eaxMbService,
Height: 300,
Width: 300,
ImagePath: IMAGE_PATH
});
var chartCategory, tableCategory, dataCategory, mapCategory, titleCategory;
// Создаём контейнер для ленты инструментов экспресс-отчета
ribbon = new PP.Exp.Ui.EaxRibbon({
Source: eaxAnalyzer, // Устанавливаем источник данных для ленты инструментов
Enabled: true, // Делаем ленту инструментов доступной
ImagePath: IMAGE_PATH,
MainButton: {
Content: "dataCategory"
},
ParentNode: document.body,
// Задаем вкладки для ленты инструментов
Categories: [
// Создаем вкладку «Диаграмма»
chartCategory = new PP.Exp.Ui.ChartCategory({
Source: eaxAnalyzer, // Задаем источник данных для вкладки
Service: eaxMbService, // Задаём сервис
// Указываем обработчик события DataChanged
MatadataChanged: function (sender, args) {
eaxGrid.refresh(args); // Обновим таблицу
},
// Указываем обработчик события ControlChanged
ControlChanged: function (sender, args) {
eaxGrid.refresh(args); // Обновим таблицу
},
// Устанавливаем обработчик для события PropertyChanged
PropertyChanged: function (sender, args) {
alert("На вкладке «Диаграмма» изменено свойство");
},
// Устанавливаем обработчик для события RequestMetadata
RequestMetadata: function (sender, args) {
alert("На вкладке «Диаграмма» выполнен запрос метаданных");
},
ImagePath: IMAGE_PATH
}),
// Создаем вкладку «Данные»
dataCategory = new PP.Exp.Ui.DataCategory({
Source: eaxAnalyzer, // Задаем источник данных для вкладки
ImagePath: IMAGE_PATH,
Service: eaxMbService,
// Указываем обработчик события DataChanged
MetadataChanged: function (sender, args) {
eaxGrid.refresh(args); // Обновим таблицу
},
// Устанавливаем обработчик для события PropertyChanged
PropertyChanged: function (sender, args) {
alert("На вкладке «Данные» изменено свойство");
},
// Устанавливаем обработчик для события RequestMetadata
RequestMetadata: function (sender, args) {
alert("На вкладке «Данные» выполнен запрос метаданных");
}
}),
// Создаем вкладку «Карта»
mapCategory = new PP.Exp.Ui.MapCategory({
Source: eaxAnalyzer, // Задаем источник данных для вкладки
ImagePath: IMAGE_PATH,
Service: eaxMbService,
// Указываем обработчик события DataChanged
MetadataChanged: function (sender, args) {
eaxGrid.refresh(args); // Обновим таблицу
},
// Устанавливаем обработчик для события PropertyChanged
PropertyChanged: function (sender, args) {
alert("На вкладке «Карта» изменено свойство");
},
// Устанавливаем обработчик для события RequestMetadata
RequestMetadata: function (sender, args) {
alert("На вкладке «Карта» выполнен запрос метаданных");
}
}),
// Создаем вкладку «Таблица»
tableCategory = new PP.Exp.Ui.TableCategory({
Source: eaxAnalyzer, // Задаем источник данных для вкладки
ImagePath: IMAGE_PATH,
DataView: eaxGrid,
Service: eaxMbService,
// Указываем обработчик события DataChanged
MetadataChanged: function (sender, args) {
eaxGrid.refresh(args); // Обновим таблицу
},
// Устанавливаем обработчик для события PropertyChanged
PropertyChanged: function (sender, args) {
alert("На вкладке «Таблица» изменено свойство");
},
// Устанавливаем обработчик для события RequestMetadata
RequestMetadata: function (sender, args) {
alert("На вкладке «Таблица» выполнен запрос метаданных");
}
}),
// Создаем вкладку «Заголовок»
titleCategory = new PP.Exp.Ui.TitleCategory({
Source: eaxAnalyzer, // Задаем источник данных для вкладки
ImagePath: IMAGE_PATH,
Service: eaxMbService,
// Указываем обработчик события DataChanged
MetadataChanged: function (sender, args) {
eaxGrid.refresh(args); // Обновим таблицу
},
// Устанавливаем обработчик для события PropertyChanged
PropertyChanged: function (sender, args) {
alert("На вкладке «Заголовок» изменено свойство");
},
// Устанавливаем обработчик для события RequestMetadata
RequestMetadata: function (sender, args) {
alert("На вкладке «Заголовок» выполнен запрос метаданных");
}
})],
Width: 600,
Height: 600,
// Устанавливаем обработчик для события Collapsed
Collapsed: function (sender, args) {
alert("Сворачивание");
},
// Устанавливаем обработчик для события Expanded
Expanded: function (sender, args) {
alert("Раскрытие");
},
// Устанавливаем обработчик для события Printing
Printing: function (sender, args) {
alert("Печать");
},
// Устанавливаем обработчик для события SaveAs
SaveAs: function (sender, args) {
alert("Выбран пункт меню «Сохранить как...»");
},
// Устанавливаем обработчик для события DataChanged
DataChanged: function (sender, args) {
// Обновим таблицу
eaxGrid.refresh(args);
},
// Устанавливаем обработчик события DiscussMenuOpened
DiscussMenuOpened: function (sender, args) {
alert("Открыто меню «Поделиться»");
},
// Устанавливаем обработчик события Discuss
Discuss: function (sender, args) {
alert("Выбран пункт меню «Поделитьсяt»");
},
// Устанавливаем обработчик для события PropertyChanged
PropertyChanged: function (sender, args) {
alert("Свойство изменено");
},
// Устанавливаем обработчик для события NewReport
NewReport: function (sender, args) {
alert("Выбран пункт меню «Новый отчёт»");
},
// Устанавливаем обработчик для события Exported
Exported: function (sender, args) {
alert("Выбран пункт меню «Экспорт»");
},
// Устанавливаем обработчик для события Closed
Closed: function (sender, args) {
alert("Выбран пункт меню «Закрыть»");
},
// Устанавливаем обработчик для события Exited
Exited: function (sender, args) {
alert("Выбран пункт меню «Выход»");
},
// Устанавливаем обработчик для события Opened
Opened: function (sender, args) {
alert("Выбран пункт меню «Открыть»");
},
// Устанавливаем обработчик для события Saved
Saved: function (sender, args) {
alert("Выбран пункт меню «Сохранить»");
},
// Устанавливаем обработчик для события RequestMetadata
RequestMetadata: function (sender, args) {
alert("Запрос метаданных");
},
// Устанавливаем обработчик для события CreatedCopy
CreatedCopy: function (sender, args) {
console.log("Выбран пункт меню «Сохранить как...»");
},
// Устанавливаем обработчик для события CreatedReport
CreatedReport: function (sender, args) {
console.log("Выбран пункт меню «Сохранить»");
}
});
// Обновляем все элементы ленты инструментов
ribbon.refreshAll();
// Каждой вкладке задаем представление таблицы
chartCategory.bindView(eaxGrid);
mapCategory.bindView(eaxGrid);
titleCategory.bindView(eaxGrid);
tableCategory.bindView(eaxGrid);
dataCategory.bindView(eaxGrid);
}
function Ready() {
waiter = new PP.Ui.Waiter();
// Создаём соединение с репозиторием
metabase = new PP.Mb.Metabase({
ExportUrl: "PPService.axd?action=export",
ImportUrl: "PPService.axd?action=import",
PPServiceUrl: "PPService.axd?action=proxy",
Id: "WAREHOUSE",
UserCreds: {
UserName: "user",
Password: "password" },
StartRequest: function () {
// Покажем компонент Waiter
waiter.show();
},
EndRequest: function () {
// Скроем компонент Waiter
waiter.hide();
},
Error: function (sender, args) {
// Выводим сообщение об ошибке
alert(args.ResponseText);
}
});
// Открываем соединение с репозиторием
metabase.open();
// Создаём сервис
eaxMbService = new PP.Exp.EaxMdService({ Metabase: metabase });
// Открываем документ с ключом 109
eaxAnalyzer = eaxMbService.edit(109);
//Создаём представление
createView(eaxAnalyzer, eaxMbService);
};
window.onerror = function () {
// В случае ошибки скрываем компонент Waiter
if (waiter)
waiter.hide();
};
4. Тег <body> и его содержимое должны выглядеть следующим образом:
<body onselectstart="return false" class="PPNoSelect" onload="Ready()"> </body>
После выполнения примера на html-странице будут размещены компоненты EaxGrid и EaxRibbon:
См. также: