Графічний інтерфейс

інформація

Графічний інтерфейс (GUI) - це спосіб взаємодії користувача з веб-застосунком за допомогою графічних елементів, таких як іконки, кнопки, вікна та меню, замість введення тексту або команд.

Склад

Графічний інтерфейс складається з:

• Бізнес-логіки - описується окремо від графічних інтерфейсів, та складається з графічних представлень бізнес-сутностей.
• UI компоненти - описуються окремо від графічних інтерфейсів та надаються розповідями.
• Складові конкретного графічного інтерфейсу - шаблонів, статичних матеріалів, типу фреймворку опису графічного відображення та потреб в візуалізації.

Бізнес-логіка

інформація

Предметні області бізнес-логіки здатні описувати графічні представлення - графічні компоненти відображення даних з наданням функціонала можливостей їх опрацювання. Предметні області можуть надавати ряд графічних представлень. Вони можуть включати інші графічні представлення, функціональну логіку та компоненти розповідей

примітка

Використання графічних представлень, як в інших графічних представленнях, так і сторінках окремого графічного інтерфейсу відбувається завдяки зарезервованому компоненту <View />, який надається ядром браузерного оточення - ядром відображень X-Fiber.

UI компоненти

інформація

UI компоненти описуються "Розповіддю" storybook - UI бібліотекою яка представляє собою колекцію, з переліком просторів імен - кнопки, поля вводу та ін. Кожний простір імен складається з переліку кінцевих компонентів. Наприклад простір імен "кнопки" буде перелічувати "submit", "error", "verify" та ін. типи кнопок. Кожний кінцевий компонент може ззовні отримувати властивості для зміни відображення конкретного графічного представлення.

примітка

Використання UI компонентів, як в графічних представленнях, так і сторінках окремого графічного інтерфейсу відбувається завдяки зарезервованому компоненту <Component />, який надається ядром браузерного оточення - ядром відображень X-Fiber.

Деталі інтерфейсу

warning

Деталі кожного окремого графічного інтерфейсу необхідно зберігати в рамках цього графічного інтерфейсу.

Файлова структура

X-Fiber пропонує слідуючу файлову структуру проєкту:

business-logic
│   ├── web-client
│   │   ├── services
│   │   │   ├── domains
│   │   │   │   ├── {domain-name-AA}
│   │   │   │   │   ├── {domain-name-AAA}
│   │   │   │   │   │   ├── {domain-name-aaa.pointer}.ts
│   │   │   │   │   │   ├── ...
│   │   │   │   │   ├── {domain-name-aa.pointer}.ts
│   │   │   │   │   ├── {domain-name-aa.router}.ts
│   │   │   │   │   ├── {domain-name-aa.dict.{ln}}.ts
│   │   │   │   │   ├── ...
│   │   │   │   ├── {domain-name-AB}
│   │   │   │   ├── ...
│   │   │   ├── {service-name-A}.ts
│   │   └── ...
│   ├── web-client.ts
storybooks
├── {storybook F}
│   ├── buttons
│   ├── inputs
│   ├── ...
{application A}
├── pages / app
│   ├── page.tsx
│   ├── page.tsx
├── static
│   ├── fonts
│   ├── icons
│   ├── ...
├── sectors
│   ├── layouts
│   ├── menus
│   ├── ...
├── ...
├── package.json
├── package-lock.json
├── ...
{application B}
├── ...

де:

• business-logic - директорія опису бізнес-логіки.
• web-client - структура бізнес-логіки веб-клієнта.
• services - директорія з переліком сервісів.
• domains - директорія з переліком прикладних областей відповідного сервісу.
• {domain-name-AA} - директорія з документами, які входять до прикладної області АА.
• {domain-name-AAA} - прикладна область ААА, яка є частиною прикладної області АА.
• {domain-name-aa.pointer}.ts - точка входу прикладної області АА.
• {domain-name-aa.router}.ts - маршрутизатор прикладної області АА.
• web-client.ts - точка входу запуску веб-клієнту.
• storybooks - директорія UI бібліотек з переліком UI бібліотек включення опису кнопок, полей вводу тощо.
• static - директорія зі статичними матеріалами, такими як шрифти, іконки тощо.
• sectors - директорія з описом шаблонів, навігаційних панелей, меню тощо.
• package.json - файл конфігурації проєкту.