Пример создания компонента WorkbookBox

Для выполнения примера создайте html-страницу и в теге HEAD  добавьте ссылки на следующие js-файлы  и css-файлы:

Также необходимо наличие рабочей книги с ключом 53283.

В теге <body> в качестве значения атрибута «onLoad» указываем имя функции, которая выполняется после окончания загрузки тела страницы:

<body onselectstart="return false" class="PPNoSelect" onload="Ready()" style="margin: 0px">
	<div id="WorkbookBox"></div>
	<div id="params"></div>
</body>

В конце документа вставляем код для установки стилей к вершине «document.body», которые соответствуют операционной системе клиента:

 

В теге SCRIPT добавьте следующий скрипт:

	    PP.resourceManager.setRootResourcesFolder("../resources/");
	    PP.resourceManager.setResourceList(['PP', 'Metabase', 'Ts', 'Express', 'TabSheetMaster', 'ChartMaster', 'TreeChartMaster', 'MapMaster', 'GaugeMaster']);
	    PP.setCurrentCulture(PP.Cultures.ru);
	    var metabase, source, tsService, settings, workbookBox, metabase, waiter;
	    var viewMode = false;
	    try {
	        PP.resourceManager.ResourcesLoaded.add(function () { PP.setCurrentCulture(PP.getCurrentCulture()); });
	    }
	    catch (e) { }
	    PP.ImagePath = "../build/img/";
	    PP.ScriptPath = "../build/";
	    PP.CSSPath = "../build/";
	    function onDummyActionFactory(actionCaption) {
	        return function (sender, args) {
	            console.log(actionCaption);
	            console.log(sender);
	            console.log(args);
	        };
	    }
	    function Ready() {
	        // Создаем индикатор загрузки
	        waiter = new PP.Ui.Waiter();
	        // Создаём соединение с репозиторием
	        metabase = new PP.Mb.Metabase(
			{
			    Id: "prognozplatform7_systest",
			    UserCreds: { UserName: "sa", Password: "Qwerty1" },
			    StartRequest: function(){waiter.show();},
			    EndRequest: function(){waiter.hide();},
			    Error: function(sender, args){alert(args.ResponseText);}
			});
	        // Открываем соединение с репозиторием
	        metabase.open();
	        // Создаём сервис для работы с временными рядами
	        tsService = new PP.TS.TSService({ Metabase: metabase });
	        // Открываем документ
	        wbk = tsService.editDocument(53283, onFirstOpened);
	        // Обработчик события открытия документа
	        function onFirstOpened(sender, args)
	        {
	            // Создаем экземляр класса отображения рабочей книги
	            workbookBox = new PP.TS.Ui.WorkbookBox({
	                ImagePath: "../build/img/", //путь к папке с пиктограммами
	                ParentNode: "WorkbookBox", //родительский узел DOM
	                Source: wbk, //источник данных(рабочая книга, данные которой отображаются в компоненте)
	                Service: tsService, //сервис для работы с временными рядами
	                //обработчик события сохранения
	                Saved: onDummyActionFactory("Произошло событие сохранения отчета на сервере"),
	                //Устанавливаем ширину и высоту
	                Width: (document.documentElement.clientWidth - 0),
	                Height:(document.documentElement.clientHeight - 20)
	            });
	        }
	        
	    };

После выполнения примера на html-странице будет размещена  рабочая книга, имеющая следующий вид:

См. также:

DHTML-компоненты