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

Графічний застосунок 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 (застосунки для телефона).