Создание графического приложения в визуальном редакторе

Графическое приложение JumPHP — это PHP-программа, окна которой являются формами: кнопки, текстовые поля, списки, выпадающие списки, флажки, ползунки, изображения, видео. Никакого HTML и CSS: движок рисует их сам, и одно и то же приложение работает на ПК, Mac, Linux, в браузере и на телефоне (Android и iOS).

Создание проекта

В JumPHP IDE: New Project, затем Graphic app (приложение для компьютера) или Mobile app (приложение для телефона, в портретной ориентации). В командной строке: bin/jumphp gui:new contacts "Contacts" (добавьте --mobile для телефона).

У приложения-примера одно окно, forms/MainForm.form.yaml, и его код, src/Form/MainForm.php.

Рисуем окно

Визуальный редактор: палитра, окно и инспектор — Визуальный редактор

Откройте forms/MainForm.form.yaml: он показывается в режиме Design (кнопки Code и Split показывают файл).

Перетащите виджет из палитры (слева) в окно или щёлкните по нему, чтобы добавить его после выделенного.
Перемещайте виджет перетаскиванием; Del удаляет его, Ctrl+D дублирует, Ctrl+Z отменяет.
Инспектор (справа) настраивает выбранный виджет: текст, стиль, размер (auto, fill или число), долю свободного места (Grow), выравнивание.

Разметка, которая подстраивается под экран

Row (строка) ставит виджеты рядом, Column — один под другим.
Spacer занимает свободное место: поставленный перед кнопкой, он сдвигает её в конец строки.
Grid раскладывает виджеты по 12 столбцам. В инспекторе Columns (of 12) задаёт ширину каждого для каждого размера экрана: xs (телефон), sm (планшет), md и lg (большие экраны). Например, 12 для xs и 6 для md: одна панель в строке на телефоне, две рядом на ПК.
Hidden on скрывает виджет на некоторых размерах экрана.

Кнопки PC, Laptop, Tablet, iPhone и Android на панели инструментов показывают окно в каждом размере; в режиме PC потяните за край окна, чтобы увидеть, как меняется разметка.

Подключение событий

Дважды щёлкните по виджету: IDE записывает его метод в код (например, public function onAddClick(Button $sender): void) и открывает его, готовым к заполнению:

public function onAddClick(Button $sender): void
{
    $this->people->addItem($this->name->text);
    $this->name->text = '';
}

Остальные события (изменение текста, выбор строки в списке…) находятся в разделе Events инспектора. Каждый виджет с Id доступен как $this->егоId, с автодополнением.

Изображения и видео

Положите изображения в assets/images/: поле Picture виджета Image (или Image у кнопки) предлагает их. Видео команда bin/jumphp video contacts film.mp4 нарезает на кадры вместе со звуком, а виджет Video воспроизводит его.

Запуск и экспорт

Кнопка Run редактора запускает приложение. Дальше — как для игры: bin/jumphp build (версия для браузера), bin/jumphp export:standalone (исполняемый файл для Windows или Linux), bin/jumphp android и bin/jumphp apple (приложения для телефона).