Skip to content

Commit 199b98b

Browse files
rpiontikrpiontik
authored
Добавлен пример встраивания виджетов в представления стандартных сущностей Components и Aspects
Добавлен пример встраивания виджетов в представления стандартных сущностей Components и Aspects
2 parents 385788e + 4315232 commit 199b98b

15 files changed

Lines changed: 199 additions & 4 deletions

File tree

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
3. [Управление бизнес-сущностями](src/business_entity_management)
1717
4. [Пример сущности для бизнес-процессов](src/sequences_entity_example)
1818
5. [Динамические контексты](src/DynamicContext)
19+
6. [Встраивание виджетов в представления стандартных сущностей](src/widgets)
1920

2021

2122
## Разворачивание

‎dochub.yaml‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
11
imports:
2-
# Пример создания метамодели для описания в нотации C4 Model
3-
- src/C4Model/dochub.yaml
2+
# 1. Пример создания метамодели для описания в нотации C4 Model
3+
# - src/C4Model/dochub.yaml
4+
# 2. Валидации сущностей в DocHub с выводом информации в меню
45
# - src/validator_example/dochub.yaml
6+
# 3. Управление бизнес-сущностями
57
# - src/business_entity_management/dochub.yaml
8+
# 4. Пример сущности для бизнес-процессов
69
# - src/sequences_entity_example/dochub.yaml
7-
# - src/DynamicContext/dochub.yaml
10+
# 5. Динамические контексты
11+
# - src/DynamicContext/dochub.yaml
12+
# 5. Пример встраивание виджетов в представления Components и Aspects
13+
- src/widgets/dochub.yaml

‎src/DynamicContext/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
* components - данные архитектуры для рендеринга
2828
* components.yaml - компоненты уровня L2
2929
* root.yaml - корневой манифест данных архитектуры
30-
* contexts - архитектурные контакты;
30+
* contexts - архитектурные контексты
3131
* l1.yaml - манифест контекста уровня L1
3232
* l2.yaml - манифест контекста уровня L2
3333
* root.yaml - корневой манифест контекстов

‎src/widgets/README.md‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
# Пример встраивания виджетов в предстваления стандартных сущностей
2+
3+
**Цель примера:** Познакомить с возможностями расширения представлений
4+
стандартных сущностей.
5+
6+
# Суть примера
7+
Создаются виджеты, которые встраиваются в представления Aspects и Component.
8+
9+
В components встраиваивается виджет, демонстрирующий, кто зависит
10+
от данного компонента:
11+
12+
![Зависимые компоненты](./images/components.png)
13+
14+
В aspects встраивается виджет, демонстрирующий, кто отвечает за
15+
реализацию данного архитектурного аспекта.
16+
17+
![Реализацторы аспекта](./images/aspects.png)
18+
19+
## Файловая структура примера
20+
* entities - расширения сущностей
21+
* templates - шаблоны виджетов
22+
* people.md - Markdown шаблон для виджета сущности aspects
23+
* aspect.yaml - расширение сущности aspect
24+
* components.yaml - расширение сущности components
25+
* root.yaml - корневой манифест пакета расширения сущностей
26+
* images - картинки для настоящей документации
27+
* aspects.yaml - архитектурные аспекты
28+
* components.yaml - архитектурные компоненты
29+
* contexts.yaml - архитектурные контексты
30+
* dochub.yaml - корневой манифест примера
31+
32+
## Использование
33+
В меню плагина DocHub выберите "Архитектура" -> "Контексты" -> "General".
34+
В открывшемся контексте кликните по архитектурногому компоненту или аспекту.
35+
Найдите в карточке втроенный виджет.
36+
37+
![Контекст](./images/context.png)
38+
39+
Вносите изменения в данные архитектуры в файлах каталога
40+
[components.yaml](./components.yaml) и [aspects.yaml](./aspects.yaml).
41+
Наблюдайте изменения в рендеринге карточек объектов.
42+
43+
## Задания для практики
44+
* Создайте дополнительные компоненты, которые будут связаны с компонентом backend.
45+
Проверьте, что в карточке компонента backend появилась информация об
46+
этих зависимостях;
47+
* Добавьте новое поле в шаблон выиджета aspects в [расширении](./entities/aspects.yaml).
48+
Добейтесь корректного вывода значания этого поля в карточке аспектов при заполнении
49+
в коде архитектуры.
50+
* Измените виджет вывода зависимостей внешних компонентов в расширении [components](./entities/components.yaml)
51+
так, чтобы зависомости наглядно отображались в виде диаграммы.

‎src/widgets/aspects.yaml‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
aspects:
2+
ordering:
3+
location: Заказы
4+
title: Заказ товаров
5+
prodact: Буренин Ольгерт Юрьевич
6+
analyst: Семенов Руслан Вазенович
7+
curator: Кучменко Татьяна Вадимовна
8+
payment:
9+
location: Оплаты
10+
title: Оплаты товаров
11+
prodact: Федоров Илья Степонович
12+
analyst: Семенов Руслан Вазенович
13+
curator: Зайчик Иван Макарович

‎src/widgets/components.yaml‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
# Описываем акрхитектурные компоненты
2+
components:
3+
user:
4+
entity: actor
5+
title: Пользователь
6+
links:
7+
- id: frontend
8+
direction: <->
9+
frontend:
10+
entity: component
11+
title: Приложение
12+
links:
13+
- id: backend
14+
direction: <->
15+
aspects:
16+
- ordering
17+
- payment
18+
backend:
19+
entity: component
20+
title: Сервер приложения
21+
links:
22+
- id: database
23+
direction: <->
24+
aspects:
25+
- payment
26+
- ordering
27+
database:
28+
entity: database
29+
title: База данных

‎src/widgets/contexts.yaml‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# Сформируем диаграмму взаимодействия компонентов
2+
contexts:
3+
general:
4+
title: Диаграмма взаимодействий
5+
location: General
6+
components:
7+
- "**" # Выберем все, что описано в архитектуре

‎src/widgets/dochub.yaml‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
imports:
2+
# Подключаем расширения сущностей
3+
- entities/root.yaml
4+
# Подключаем компоненты
5+
- components.yaml
6+
# Подключаем аспекты
7+
- aspects.yaml
8+
# Подключаем онтексты
9+
- contexts.yaml

‎src/widgets/entities/aspects.yaml‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
entities:
2+
# Расширяем сущность "aspects"
3+
aspects:
4+
# Инъектируем собственный виджет
5+
widgets:
6+
# Будем показывать расширенную информацию об аспекте
7+
people: # Идентификатор виджета
8+
# Название виджета
9+
title: Люди
10+
# Расположение
11+
# < - слева
12+
# > - справа
13+
# = - Растянуть на 100%
14+
align: "<"
15+
# Тип документа шаблона
16+
type: markdown
17+
# Шаблон виджета
18+
template: templates/people.md
19+
# Данные для шаблона
20+
source: >
21+
(
22+
$lookup(aspects, $params.aspect)
23+
)

‎src/widgets/entities/components.yaml‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
entities:
2+
components:
3+
widgets:
4+
# Будем показывать внешние связи на данный компонент
5+
outside_links: # Идентификатор виджета
6+
# Название виджета
7+
title: Кто зависит от этого компонента
8+
# Расположение
9+
# < - слева
10+
# > - справа
11+
# = - Растянуть на 100%
12+
align: "<"
13+
# Тип документа шаблона
14+
type: table
15+
# Определяем заголовок таблицы
16+
headers:
17+
- value: id # Идентификатор зависимого компонента
18+
text: Идентификатор # Заголовок колокнки
19+
sortable: true # Производить сортировку по колонке
20+
align: left # Форматирование по горизонтали
21+
width: 40% # Ширина колонки
22+
link: link
23+
- value: title # Наименование зависимого компонента
24+
text: Наименование
25+
sortable: true
26+
align: left # Форматирование по горизонтали
27+
width: 40%
28+
link: link
29+
- value: direction # Направление связи
30+
text: Направление связи
31+
sortable: true
32+
align: center
33+
width: 20%
34+
# Данные для шаблона
35+
source: >
36+
(
37+
[$distinct(components.$spread().(
38+
$id := $keys()[0];
39+
$title := *.title;
40+
$links := $distinct($.*.links[id=$params.component].("" & direction));
41+
$links.{
42+
"id": $id,
43+
"title": $title,
44+
"direction": $links,
45+
"link": "/architect/components/" & $id
46+
}
47+
))^(id)]
48+
)

0 commit comments

Comments
 (0)