Размещение DHTML-компонентов

Размещение базовых компонентов

Чтобы разместить базовый компонент:

  1. В созданном веб-приложении добавьте html-страницу;

Примечание. Базовые компоненты можно размещать и вне веб-приложения. Для их размещения потребуется только html-страница и необходимые файлы скриптов и стилей (см. п.2).

  1. Добавьте ссылки на файлы PP.js и PP.css (при работе с браузером Internet Explorer -  PP_IE7.js и PP_IE7.css) и на файл с ресурсами (например, resources.ru.js):

Примечание. При необходимости может потребоваться подключение других js- и css-файлов. Информация об этом представлена в описании отдельного компонента.

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

Примечание. Ссылку на модуль с ресурсами следует добавлять, если в компоненте содержатся поля (например, заголовки элементов управления), которые требуют локализации. Подробнее см. в описании компонентов.

  1. В тег <body> добавьте тег <script>, с заданным атрибутом type. Внутри тега <script> поместите скрипт для создания компонента (см. в описании DHTML-компонентов), например:

<script type="text/javascript">
   var btn = new PP.Ui.Button({
      ParentNode: document.getElementById("btn1"),
      Content: "Открыть"
   })
</script>

  1. В тег <body> добавьте элемент DIV с идентификатором, указанным в свойстве ParentNode создаваемого компонента или в параметре метода Control.addToNode, то есть определите фрагмент страницы, в который будет помещаться компонент:

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

  1. Откройте созданную страницу в браузере.

Размещение высокоуровневых компонентов

Высокоуровневый компонент – это визуальный компонент, который для отображения какой-либо информации использует данные с сервиса. Каждый такой компонент может использовать для отображения данных низкоуровневые компоненты – TabSheet, TreeList, ComboBox и т.д.

Чтобы разместить высокоуровневый компонент:

  1. Создайте веб-приложение, добавьте  html-страницу;

  2. Добавьте ссылки на js-файлы и на файлы с ресурсами (подробно см. в описании отдельного компонента);

  3. В теге <script> добавьте код для динамического подключения стилей (список необходимых файлов со стилями см. в описании отдельного компонента):

<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. В тег <body> добавьте тег <script>, с заданным атрибутом type. Внутри тега <script> поместите скрипт для создания компонента, а также скрипт для подключения к метабазе (см. пример на странице «Пример размещения компонента ReportBox»);

  2. Выполните пункты 4 и 5 из списка «Размещение базовых компонентов».

Общие настройки страницы для размещения компонентов

Для правильной работы компонентов продукта «Форсайт. Аналитическая платформа» в Internet Explorer и других браузерах страница должна содержать следующее описание типа документа:

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

Также на странице должен быть добавлен тег:

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

Компоненты продукта «Форсайт. Аналитическая платформа» не поддерживают режимы совместимости Internet Explorer.

Для синхронизации с ресурсами продукта «Форсайт. Аналитическая платформа» необходимо указать кодировку «utf-8».

См. также:

DHTML-компоненты | Создание веб-приложения