Пример совместного использования компонентов EaxRibbon и EaxDataBox

Для выполнения примера необходимо создать html-страницу и выполнить следующие действия:

1. В теге HEAD добавьте ссылки на следующие css-файлы: PP.css, PP.Express.css.

Также нужно добавить ссылки на js-файлы: PP.js, PP.Metabase.js, PP.Express.js и resources.ru.js.

2. В теге SCRIPT добавьте код для создания компонентов EaxRibbon и EaxDataBox:

    var eaxData;
    var idTime;
    onReady = function () {
        var IMAGE_PATH = "../build/img/";//путь к папке с картинками
        PP.resourceManager.setRootResourcesFolder("../resources/");//путь к папке с ресурсами
        PP.setCurrentCulture(PP.Cultures.ru);//выбор языковых настроек
        var eaxAnalyzer, eaxMbService;
        //создаем компонент Waiter для ожидания соединения с метабазой
        waiter = new PP.Ui.Waiter();
        //Создаем экземпляр метабазы
        metabase = new PP.Mb.Metabase({
            Id: "PPRepository",
            UserCreds: { UserName: "user", Password: "password" },
            StartRequest: function () {
                waiter.show();
            },
            EndRequest: function () {
                waiter.hide();
            },
            Error: function (sender, args) {
                alert(args.ResponseText);
            }
        });
        //Открываем метабазу
        metabase.open();
        //Создаем сервис для работы с экспресс-отчетами
        eaxMbService = new PP.Exp.EaxMdService({ Metabase: metabase });
        //открываем экспресс-отчет с ключом 935529 на редактирование
        eaxAnalyzer = eaxMbService.edit(935529);
        //создаем область данных
       eaxData = new PP.Exp.Ui.EaxDataBox({
            ParentNode: "Eax",
            Source: eaxAnalyzer, //источник данных
            Service: eaxMbService, //сервис, через который открыт источник данных
            Width: "100%",
            Height: "100%",
            ImagePath: IMAGE_PATH,
            DataChanged: function (sender, args) {
                eaxData.refresh(args);
                rb.refresh(args);
            }
        });
        //создаем ленту
        rb = new PP.Exp.Ui.EaxRibbon({
            ParentNode: "Ribbon",
            Source: eaxAnalyzer,
            Service: eaxMbService,
            ImagePath: IMAGE_PATH,
            ChartDataView: eaxData.getChartView(),//Указываем представления карты и диаграммы для работы настроек на ленте
            MapDataView: eaxData.getMapView(),
            DataChanged: function (sender, args) {
                eaxData.refresh(args);
            }
        });
        window.onresize();
    }
    // Функция для изменения размеров контейнера EaxDataBox при изменении размеров страницы
    window.onresize = function ()
    {
        if (idTime)
            clearTimeout(idTime);
        idTime = setTimeout(function () {
            if (eaxData)
                eaxData.setSize(document.body.offsetWidth, document.body.offsetHeight - rb.getHeight());
            
            idTime = null;
        }, 100);
    };

3. В теге BODY разместите созданные компоненты и укажите функцию, которая будет выполняться при загрузке страницы:

<body onselectstart="return false" class="PPNoSelect" onload="onReady()">

    <div id="Ribbon" style="width: 100%;">

    </div>

    <div id="Eax">

    </div>

</body>

После выполнения примера на странице будут размещены компоненты EaxRibbon и EaxDataBox:

При изменении настроек диаграммы, карты, таблицы и пузырьковой диаграммы из ленты инструментов установленные настройки будут применяться к диаграмме. При изменении размеров окна браузера будут меняться размеры размещенных компонентов.

См. также:

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