DHTML Components Layout

Basic Components Layout

To place a basic component:

  1. In the created web application, add an HTML page.

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).

  1. Add links to the PP.js and PP.css files (on working with Internet Explorer -  PP_IE7.js and PP_IE7.css) and a link to the file with resources (for example, 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="Styles/PP.css" rel="stylesheet" type="text/css" />
   <script type="text/javascript" src="Scripts/PP.js"></script>
   <script src="Scripts/resources/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.

  1. 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>

  1. 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>

  1. Open the created page in the browser.

High-Level Components 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:

  1. Create a web application, add an HTML page.

  2. Add links to JS files and resources files (for details see description of a separate component).

  3. 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.loadStylesH(styles);  </script>

  1. Add the <script> tag with the specified type attribute to the <body> tag. Place the script for creating a component and the script for connecting to metabase to the <script> tag (see example on the Example of the ReportBox Component Layout).

  2. Execute the points 4 and 5 from the Basic Components Layout list.

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.

See also:

DHTML Components | Creating a Web Application