DHTML Components Layout

Basic Component Layout

To place a basic component:

Add an HTML page in the created web application.

NOTE. Basic components can be placed outside the web application. To place the components, an HTML page and necessary script and style files are required (see p.2).

Add links to the PP.js and PP.css files (when working with Internet Explorer - to the PP_IE7.js and PP_IE7.css files) and a link to the file with resources (for example, PP.resources.ru.js):

NOTE. If required, links to other JS and CSS files may be required. Information about this procedure is given in description of a separate component.

<head>
    <link href="Build/PP.css" rel="stylesheet" type="text/css" />	
    <script type="text/javascript" src="Build/PP.js"></script>	
    <script src="Resources/PP.resources.ru.js" type="text/javascript"></script>	
</head>

NOTE. A link to resources unit must be added if a component contains fields (for example, control titles), that must be localized. For details see description of components.

Add the <script> tag with the specified attribute "type" to the <body> tag. Place a script for creating a component to the <script> tag (see description of DHTML components), for example:

<script type="text/javascript">
    var btn = new PP.Ui.Button({
        ParentNode: document.getElementById("btn1"),
        Content: "Open"
    })
</script>

In the <body> tag add the DIV element with the identifier specified in the ParentNode property of the created component, or in the parameter of the Control.addToNode method, that is, determine fragment of the page that will contain the component:

<div id="btn1">
</div>

Open the created page in the browser.

After executing the operations the component will be placed on the HTML page.

High-Level Component Layout

A high-level component is a visual component that uses service data to display information. Each high-level component can use low-level components - TabSheet, TreeList, ComboBox, and so on - to display data.

To place a high-level component:

Add an HTML page in the created web application.
Add links to JS files and resources files (for details see description of a separate component).
In the <script> tag add the code for dynamic style connection (see the list of required files with styles in in description of a separate component):

<script type="text/javascript">
    var styles = ["Build/PP.css",
        "Build/PP.App.css",
        "Build/PP.Express.css",
        "Build/PP.Metabase.css"];
    if (PP.IsIE)
    {
        PP.scriptManager.loadStyles([styles[0]]);
        styles.shift();
    }
    PP.scriptManager.loadStyles(styles);
</script>

Add the <script> tag with the specified attribute "type" to the <body> tag. Place the script for creating a component and the script for connecting to repository to the <script> tag (see example on the Example of the ReportBox Component Layout»).
Repeat Steps 4 and 5 in the Basic Components Layout section.

After executing the operations the component will be placed on the HTML page.

General Page Settings for Components Layout

To ensure correct work of Foresight Analytics Platform components, a page in Internet Explorer and other browsers must contain the following document description:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

The page must also contain the tag:

<meta http-equiv="X-UA-Compatible" content="IE=edge" charset="utf-8"/>

Components of Foresight Analytics Platform do not support Internet Explorer compatibility modes.

To synchronize with resources of Foresight Analytics Platform, specify the UTF-8 encoding.