Example of Creating the EaxToolBar Component

To execute the example, create an HTML page and execute the following operations:

1. Add links to the following files: PP.css, PP.Express.css.

Also add links to the following JS files: PP.js, PP.Metabase.js, PP.Express.js, and resources.ru.js.

2. In the <head> tag specify style for the elements:

<style type="text/css">
    body, html {
        height: 100%;
        width: 100%;
        overflow: hidden;
    }
</style>

3. In the <head> tag add a script that creates a group of buttons to switch between data display modes:

<script type="text/javascript">
var metabase, eaxAnalyzer, eaxMbService, eaxToolBar;
function Ready() {
    // Determine language settings for resources
    PP.setCurrentCulture(PP.Cultures.ru)
    // Specify path to the root folder containing resources files
    PP.resourceManager.setRootResourcesFolder("../resources/");
    // Create repository connection
    metabase = new PP.Mb.Metabase({
        ExportUrl: "PPService.axd?action=export",
        ImportUrl: "PPService.axd?action=import",
        PPServiceUrl: "PPService.axd?action=proxy",
        Id: "prognozplatform7",
        UserCreds: { UserName: "user", Password: "password" }
    });
    // Open repository connection
    metabase.open();
    // Create as service for working with express reports
    eaxMbService = new PP.Exp.EaxMdService({ 
        Metabase: metabase 
    });
    // Open express report with the 108 key 
    eaxAnalyzer = eaxMbService.editDocument(108);
    // Specify path to icons folder
    var IMAGE_PATH = "../Debug/img/";
    // Create a group of buttons for toggling between data display modes
    eaxToolBar = new PP.Exp.Ui.EaxToolBarView({
        Source: eaxAnalyzer,
        ImagePath: IMAGE_PATH,
        IsRadio: true 
    });
    // Refresh group of buttons
    eaxToolBar.refresh();
    // Add group of buttons to document
    eaxToolBar.addToNode(document.body);
    eaxToolBar.show();
}
</script>

4. In the <body> tag specify name of the function that creates a button group as the value of the onLoad attribute:

<body onselectstart="return false" onload="Ready()">
</body>

5. At the end of the document insert a code that sets styles corresponding to client's operating system, to the document.body node:

After executing the example the EaxToolBar component is placed to the HTML page: