Перейти к содержанию

Введение в DataCAD

DataCAD – средство визуальной разработки веб-приложений, предназначенных для создания моделей в виде графов, с возможностью подключения к данным и их обработке на WDC.Платформе.

DataCAD реализован в виде пользовательского одностраничного модульного веб-приложения с открытой архитектурой, т.е. имеется некоторый первичный набор плагинов, который может впоследствии расширяться.

Система DataCAD является low-code платформой, доступной для работы бизнес-аналитиков и продвинутых пользователей.

Работа в DataCAD делится на два этапа:

  • Пользователь создаёт Рабочий стол приложения – размещает модули интерфейса – панели, настраивает связи между ними.

  • Пользователь наполняет приложение рабочими моделями, содержащими графы, расчёты и т.д.

Приложения сохраняются на уровне домашней страницы DataCAD:

Рабочий стол – рабочая область DataCAD, используемая в процессе разработки пользовательского приложения с расположенными на ней графическими компонентами: панелями.

Панель – визуальный компонент DataCAD, являющийся составным элементом рабочего стола, на котором ведётся разработка пользовательских графов.

Граф – совокупность узлов и связей между ними.

Примитив – элемент графа: узел, связь.

Узел – простейший элемент графа, примитив. Узел имеет название, набор входных и выходных портов, набор свойств. В DataCAD предусмотрены узлы нескольких типов. Они собраны в библиотеке примитивов для заимствования пользователем в процессе работы.

Свойство узла – настраиваемая характеристика узла, которое может содержать выражение или константу для расчета значения определенного типа.

Порт – именованный компонент внутри узла, который содержит:

  • имя, отражающее назначение порта – входной (inPort), выходной (outPort);

  • значение, которое переносится по связи из другого узла (inPort) или передаётся в другой узел (outPort).

Полотно примитивов (LiveDashPanel) – панель, на которой пользователь создаёт граф с использованием библиотеки примитивов.

Библиотека примитивов – панель, содержащая образцы примитивов – узлов и связей, которые пользователь может разместить на полотне примитивов для построения графа. Примитивы объединены в тематические группы:

  • Связи.

  • Элементы электрических схем.

  • Логические узлы.

  • Рисковые примитивы типа.

Начало работы

После запуска DataCAD открывается пустой рабочий стол – рабочая область, на которой можно располагать различные панели интерфейса.

Работа в DataCAD ведётся в два этапа:

  • Сначала Вы создаёте рабочий стол.

  • Затем на созданном рабочем столе разрабатываете граф.

Создание рабочего стола

Нажмите на .

В появившемся окне укажите название рабочего стола и нажмите кнопку "Сохранить":

В результате на Домашнюю страницу DataCAD будет добавлен Ваш рабочий стол:

Открываем Ваш рабочий стол:

Пока он пуст.

Сначала займёмся наполнением стола рабочими панелями. Нажмём последовательно на иконки и .

В результате на панели DataCAD Настройка компонента появятся все настройки рабочего стола.

Активируем переключатель Редактирование рабочего стола.

Далее перейдём к добавлению панелей на рабочий стол.

Нам потребуются следующие панели:

  • Панель полотна примитивов (LiveDashPanel) – панель, на которой будут размещаться рабочие элементы.

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

  • Панель свойств примитивов (PrimitivePropertiesPanel) – специализированная панель, предназначенная настройки свойств узла и портов.

  • Панель настройки событий и действий (EventSystemPanel) – панель, в которой устанавливается связь между панелями Рабочего стола для передачи данных. В нашей задаче – для передачи и отображения свойств элементов графа.

Откройте список панелей (меню Панели).

Для добавления на Рабочий стол нужной панели следует выбрать её в списке, кликнуть на ней левой кнопкой "мыши", сдвинуть курсор вправо на маленькое окно и снова кликнуть в нём левой кнопкой "мыши":

На Рабочий стол будет добавлена панель:

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

Добавьте на Рабочий стол остальные панели и откорректируйте их при необходимости.

Отключите переключатель Редактирование рабочего стола.

На рабочем столе отобразятся панели в режиме их непосредственного использования:

Каждый примитив имеет свойства. Свойства должны отображаться на Панели свойств примитивов PrimitivePropertiesPanel. Для этого необходимо установить связь между панелями.

На панели EventSystemPanel (Панель системы событий и действий) нажимаем кнопку Добавить новую подписку.

Заполняем поле Название показателя.

В поле Панель группы События выбираем из списка строку:

В поле Событие панели группы События выбираем из списка строку:

Событие BroadcastPrimitiveInfo в дальнейшем обеспечит трансляцию на панель PrimitivePropertiesPanel свойств примитивов, размещённых на панели полотна примитивов.

Далее заполняем группу полей Действия.

Для поля Плагин выбираем значение:

Для поля Действие из списка выбираем строку:

Действие BroadcastPrimitiveInfo обеспечит на панели PrimitivePropertiesPanel отображение свойств примитивов, размещённых на панели полотна примитивов.

Нажимаем кнопку Сохранить:

В результате в списке подписок появится новая активная подписка:

В завершении первого этапа сохраним рабочий стол с помощью кнопки Сохранить на панели DataCAD Настройка компонента.

Теперь перейдём к выполнению поставленной перед нами задачи – созданию графа.

Выполнение задач на рабочем столе

Создание графа с использованием выражений

Перед нами стоит задача разработки графа.

Граф состоит из трёх узлов. Два нижних узла связаны с верхним узлом. На нижних элементах отображаются числовые значения. На верхнем элементе выводится сумма этих чисел.

В DataCAD такие элементы называются примитивами.

На Панели библиотеки примитивов развернём группу "Рисковые примитивы" и перетащим нужные элементы на Панель полотна примитивов.

Важно!

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

Нам потребуются два примитива с один выходом и один примитив в двумя входами :

Отредактируем их размер и местоположение. Для активации режима редактирования нужно кликнуть на примитиве, после чего он приобретёт следующий вид:

Теперь между элементами графа нужно установить связи. На Панели библиотеки примитивов развернём группу "Связи" и перетащим нужные элементы на Панель полотна примитивов, соединив нижние примитивы с верхним:

Важно!

Для перемещения всего графа нужно установить курсор в области размещения графа, нажать колёсико "мыши" и передвинуть граф в нужно место.

Масштаб отображения графа на панели можно изменить, прокручивая колёсико "мыши" в нужном направлении.

Каждый элемент графа имеет свойства. Свойства отображаются на Панели свойств примитивов PrimitivePropertiesPanel. В предыдущем разделе мы настроили связь между панелями, что обеспечило трансляцию на панель PrimitivePropertiesPanel свойств элементов графа.

Теперь настроим свойства примитивов.

При построении графа элементам присваиваются идентификаторы, они выводятся на элементах:

В дальнейшем они будут отображены на Панели свойств примитивов при позиционировании на элементе.

Спозиционируем курсор на элементе графа. В Панели свойств примитива отобразится идентификатор примитива и введённый ранее текст на элементе.

Продолжим работу на вкладке Свойства этой панели.

Нажмём на интерактивное поле Создать новое свойство. В поле Название укажем название свойства, используя латинские буквы и символы, и нажмём кнопку Добавить свойство.

Свойство будет добавлено ниже в список свойств:

Открываем это свойство для редактирования, используя иконку .

Поле Тип запроса оставляем без изменений – expression.

А в поле Запрос указываем число – 28.

И нажимаем кнопку Сохранить.

Далее следует введённое свойство Sum1 передать через порт в верхний элемент графа через порты. Для этого открываем вкладку Порты. Находим нужный выходной порт (в нашем случае он один) – outPort1. Открываем его на редактирование по кнопке . И определяем свойство Sum1:

  • Поле Тип запроса оставляем без изменений – expression.

  • В поле Запрос указываем – this.Sum1.

  • Нажимаем кнопку Сохранить.

После чего нажмём кнопку на Панели полотна примитивов. И на Панели свойств примитивов появится заданное число:

А если кликнуть на верхнем элементе графа и открыть вкладку Порты, то для порта inPort2 (порт, к которому была установлена связь от правого нижнего элемента) мы увидим переданное значение – 28.

Аналогичные действия проделаем для правого нижнего элемента, определив ему число 67.

В итоге для верхнего элементе графа на вкладке Порты мы увидим значения, переданные из нижних элементов:

Для отображения на верхнем элементе суммы переданных чисел создадим свойство:

После нажатия на Панели полотна примитивов кнопки мы увидим, что для верхнего элемента на Панели свойств примитивов появилась сумма чисел из нижних элементов:

Теперь выведем числа и их сумму на элементы вместо отображённых по умолчанию идентификаторов.

При двойном клике по примитиву на нём откроется интерактивная панель для ввода и форматирования текста. Последовательно для всех элементов введём текст и отформатируем его:

  • Левый нижний элемент – Число 1: \$Sum1\$.

  • Правый нижний элемент – Число 2: \$Sum2\$.

  • Верхний элемент – Итог: \$Sum3\$.

Получим требуемый граф:

Сохраняем граф на сервере для последующего использования. Для этого на Панели полотна примитивов:

  • Введём имя файла графа – Graph.

  • Нажмём кнопку .

Создание графа с использованием OTL-запроса

Есть очередная задача по разработке графа, которую нам нужно решить.

Граф состоит из двух узлов. Нужно в нижнем узле выполнить otl-запрос и отобразить результат его выполнения на верхнем узле.

Создадим новый граф – Graph4 из двух узлов.

Для нижнего узла добавим свойство с типом "OTL":

  • В поле Тип запроса установим значение – OTL.

  • В поле Запрос пишем OTL-запрос: | makeresults | eval t=18.

  • Нажимаем кнопку Сохранить.

Далее нажимаем кнопку на Панели полотна примитивов. И на Панели свойств примитивов для свойства otl1 во вкладке Свойства появится результат выполнения otl-запроса:

Теперь настроим вывод числа из otl-запроса. Для этого создаём новое свойство otl2 с типом expression:

  • Поле Тип запроса оставляем без изменений – expression.

  • В поле Запрос указываем – this.otl1[0][`t`].

  • Нажимаем кнопку Сохранить.

И наконец, выведем полученное число на верхний узел графа.

Сначала передадим число в верхний узел через выходной порт нижнего узла.

На Панели свойств примитивов для свойства otl1 во вкладке Порты находим порт outPort1, жмём кнопку :

  • Поле Тип запроса оставляем без изменений – expression.

  • В поле Запрос указываем – this.otl2.

  • Нажимаем кнопку Сохранить.

Далее нажимаем кнопку на Панели полотна примитивов. После чего на Панели свойств примитивов для порта outPort1 нижнего узла появится нужное значение:

Это значение будет передано во входной порт inPort1 верхнего узла:

Для отображения полученного числа кликнем дважды по верхнему узлу. На нём откроется интерактивная панель для ввода и форматирования текста. Введём текст и отформатируем его:

В результате получаем требуемый граф:

Сохраняем граф на сервере для последующего использования.

К началу