Экраны



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

Проще говоря, то, что пользователь видит на странице и какие действия совершает описывается в одном классе под названием- "Экран".

Экран не знает откуда берутся данные, это может быть: база данных, API или любые другие внешние источники. Экран имеет обычные функциональные возможности современного пользовательского интерфейса. Можно настраивать внешний вид экрана, а также добавлять или удалять команды. Построение внешнего вида основано на предоставленных шаблонах (Layouts) и всё, что вам нужно сделать это лишь определить какие данные будут показаны в том или ином шаблоне.

Screens

Почему не CRUD?

Почти все популярные надстройки используют построение CRUD для пользовательских моделей, это хорошее решение, но приложение не может состоять из одних только базовых функций, Скорее всего вы будете расширять и дополнять сгенерированную логику. Хорошим примером, что стандартных операций создания/чтения/редактирование/удаления не хватает, может служить возможность "Отправить на печать". ORCHID позволяет создавать CRUD с помощью "Экранов", но это не является их целью.

Информационные объекты и экраны

Используя традиционные инструменты проектирования, создание нескольких шаблонов для отображения и изменения данных более трудоемкая и ресурсоемкая работа, чем создание таблиц данных. Это особенно заметно когда вы следуете трехуровневой схеме архитектуры приложений, а именно, вы должны создать большой количество вспомогательного кода для привязки уровней. Инструменты для быстрой разработки приложений делают этот процесс намного проще и дешевле.

Экраны используются в ORCHID для отображения и управления данными, основаны на предопределенных шаблонах. Чтобы связать данные с экраном, вам нужно лишь указать отображаемые сущности или запросы.

Создание

С ORCHID это еще проще и вы можете создать набор экранов всего за несколько минут.

Для создания нового экрана требуется выполнить команду:

php artisan orchid:screen Users

В директории app/Http/Controllers/Screens будет создан файл Users со следующим содержанием:

namespace App\Http\Controllers\Screens;

use Illuminate\Http\Request;
use Orchid\Platform\Screen\Screen;

class Users extends Screen
{
    /**
     * Display header name
     *
     * @var string
     */
    public $name = 'Users Screen';

    /**
     * Display header description
     *
     * @var string
     */
    public $description = 'Users Screen';

    /**
     * Query data
     *
     * @return array
     */
    public function query() : array
    {
        return [];
    }

    /**
     * Button commands
     *
     * @return array
     */
    public function commandBar() : array
    {
        return [];
    }

    /**
     * Views
     *
     * @return array
     */
    public function layout() : array
    {
        return [];
    }
}

Регистрация в маршрутах

Зарегистировать каждый экран можно с помощью метода screen у Route

Route::screen('/news', 'Screens\Users','platform.screens.users.list');
//or
$route->screen('/news', 'Screens\Users','platform.screens.users.list');

Данные

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

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

Данные для показа на экране определяются в методе query, где должны происходить выборки или формирование информации. Передача осуществляется в виде массива, ключи будут доступны в макетах, для их управления.

Пример, при котором в Layouts будут доступны ключи user и users:

    /**
     * Query data
     *
     * @return array
     */
    public function query() : array
    {
        return [
            'user'  => User::find(1),
            'users' => User::paginate(),
        ];
    }

Обработка

В экранах предусмотрены встроенные команды (Screen Command Bar), позволяющие пользователям выполнять различные пользовательские сценарии. За это отвечает метод commandBar, в котором описываются требуемые кнопки управления.

Например:

/**
* Button commands
*
* @return array
*/
public function commandBar() : array
{
    return [
        Link::name('Вывести на печать')->method('print'),
    ];
}

Класс Link отвечает, что будет происходить по нажатию на кнопку, в примере выше, при нажатии на кнопку Вывести на печать, будет вызван метод экрана print, в Request будут доступны все данные которые пользователь видел на экране.

// По нажатию будет вызван метод 'create'
Link::name('Новая функция')->method('create');

// По нажатию будете перенаправлены на указанный адрес
Link::name('Внешняя ссылка')->link('http://google.com/');

// По нажатию будет показано модальное окно (CreateUserModal),
// в котором можно выполнить метод "save"
Link::name('Модальное окно')
->modal('CreateUserModal')
->title('Добавить пользователя')
->method('save'),

Макеты

Макеты отвечают за внешний вид экрана, то есть как и в каком виде данные будут показаны. Более подробно можно прочитать в разделе Макеты

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

/**
 * Views
 *
 * @return array
 */
public function layout() : array
{
    return [
        Layouts::columns([
            'Левая колонка' => [
                PatientFirstRows::class,
            ],
            'Правая колонка' => [
                PatientSecondRows::class,
            ],
        ]),
        Layouts::columns([
            'Левая колонка' => [
                AppointmentListLayout::class
            ],
            'Правая колонка' => [
                InvoiceListLayout::class
            ],
        ]),
        // Модальные окна
        Layouts::modals([
            'Appointments' => [
                PatientFirstRows::class,
            ],
        ]),
        // Модальное окно получающее данные через POST запрос
        Layouts::modals([
            'oneAsyncModal' => [
                UserEditLayout::class,
            ],
        ])->async($method,$route,$async,$saveajax), 
        /* Где $method - функция которая отсылает данные на POST запрос
         * $route - Роут к функции $method (по умолчанию Route::currentRouteName() )
         * $async - если true модельное окно получающее данные через POST (по умолчанию true)
         * $saveajax - также позволяет сохранить данные через POST
         */
    ];
}