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

інформація

Графічний інтерфейс описує функціонал взаємодії з кінцевим користувачем. X-Fiber закладає опис графічного інтерфейсу як композиція, яка складається зі сторінок, навігаційних панелей, секцій, UI компонентів та статичних файлів.

Сторінка

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

Вміст сторінки складається з групи представлень у різних предметних областях, до яких можуть передаватись необхідні властивості props, та відповідні UI компоненти. Шляхом використання цих властивостей та вибору необхідних представлень бізнес-логіки формується опис вмісту сторінки.

Представлення предметної області

Ряд представлень предметних областей може залежати або використвувати похідні представлення інших предметних областей. Так наприклад сторінка з користувачами, може використовувати представлення предметної області "Користувачі - Ролі" для відображення таблиці Користувачів та їх ролей тощо.

Реалізація

Реалізація графічних представлень здійснюється в відповідній предметній області відповідного сервісу використовуючи документ "Графічне представлення". Деталі створення та використання графічних представлень описані в "Графічне представлення". Простий приклад опису графічного представлення виглядає так:

import {setView} from "@x-fiber/display";
import styles from "./signup-form.module.scss";

type Views = 'SignupForm' | 'LoginForm' | 'ResetPasswordForm';
type AppServices = 'BusinessAdmin' | 'SystemAdmin';
type BusDomains = 'BusUsersAgg' | 'BusUsersAuthSpec' | 'BusUsersLog';
type SignupFormProps = {
    className?: string
}

export const BusUsersAggSignupFormView = setView<Views, SignupFormProps>(
    'SignupForm',
    (agents: Agents, context: Context, props: SignupFormProps) => {
        const {getStore} = agents.schemaAgent;

        const store = getStore<AppServices, BusDomains>(
            "BusinessAdmin",
            "BusUsersAgg"
        )();

        return (
            <section className={styles.wrapper}>
                // signup form ...
            </section>
        );
    }
);

Використання

Використання графічних представлень здійснюється завдяки зарезервованому X-Fiber компоненту - View.

import React from 'react';
import './App.css';
import {Component, View} from 'business-logic'

function App() {
    return (
        <div className="App">
            <View service={'BusinessAdmin'} domain={'BusUsersAgg'} view={'SignupForm'}/>
            <View service={'BusinessAdmin'} domain={'BusUsersAgg'} view={'ForgotPassword'}/>
            <Component storybook={'NextUI'} space={'Text'} name={'RichText'} props={
                {
                    color: 'Red'
                }
            }/>
        </div>
    );
}

export default App;

UI компоненти

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

інформація

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

Використання різних типів UI компонентів в графічних представленнях може здійснюватись завдяки властивостям props цих графічних компонентів, через які можуть передаватись назва storybook, та його специфічні властивості

Реалізація

Для реалізації UI компонентів необхідно створити storybook записати його в вбудовану функцію setStorybooks, а в рамках цього storybook необхідно створити простір імен space в якому реєструвати безпосередньо сам UI компонент. Деталі впровадження UI компонентів описані в розділі "UI компоненти"

import { setComponent } from 'business-logic'

type EmailProps = {
    placeholder: string
}

export const EmailInput = setComponent('EmailInput', (props: EmailProps) => {
    return (<div>`Email placeholder ${props}`</div>)
}) 

Використання

Використання компонентів здійснюється завдяки зарезервованому X-Fiber компоненту з одноіменною назвою - Component.

import { Component, setView } from 'x-fiber/display'
import styles from "./signup-form.module.scss";

type Views = 'SignupForm'
type AppServices = 'BusinessAdmin'
type BusDomains = 'BusUsersAgg'

export const BusUsersAggSignupFormView = setView<Views>(
    "SignupForm",
    (agents, context, props) => {
        const {getStore, getRoute} = agents.schemaAgent;

        const store = getStore<AppServices, BusDomains>(
            "BusinessAdmin",
            "BusUsersAgg"
        )();

        const onClick = async () => {
            const {userId} = await getRoute<AppServices, BusDomains>(
                "BusinessAdmin",
                "BusUsersAgg",
                "v1/signup",
                "POST"
            );

            store.setUserId(userId);
        };

        return (
            <section onClick={onClick} className={styles.wrapper}>
                <Component storybook={'NextUI'} space={'input'} name={'EmailInput'} props={
                    {
                        placeholder: 'john.doe@gmail.com',
                    }
                }/>
            </section>
        );
    }
);

Навігаційна панель

Зазвичай навігаційні панелі інтегрують в Header, Footer, Sidebar, Navbar тощо, а їх призначення відображається в слідуючому:

Секції

Так як навігаційні панелі в цілому інтегруються в Header, Footer, Sidebar, Navbar, а самі ці елементи при цьому, можуть бути не змінні від сторінки до сторінки - результат цієї потреби є побудова шаблонів сторінок. Шаблон - це заготовлений каркас з групою сталим компонентів, та динамічно змінною складовою вмісту сторінки.

Статичні матеріали

Елементи GUI, як правило, складаються з UI бібліотеки компонентів та статичних матеріалів, які повинні бути збережені окремо для подальшого активного використання в різних представленнях або секціях.