Tworzenie aplikacji graficznej w edytorze wizualnym

Aplikacja graficzna JumPHP to program PHP, którego okna są formularzami: przyciski, pola tekstowe, listy, listy rozwijane, pola wyboru, suwaki, obrazy, filmy. Bez HTML i CSS: silnik rysuje je sam, a ta sama aplikacja działa na PC, Macu, Linuksie, w przeglądarce i na telefonie (Android i iOS).

Utworzenie projektu

W JumPHP IDE: New Project, potem Graphic app (aplikacja na komputer) lub Mobile app (aplikacja na telefon, w pionie). W wierszu poleceń: bin/jumphp gui:new contacts "Contacts" (dodaj --mobile dla telefonu).

Przykładowa aplikacja ma jedno okno, forms/MainForm.form.yaml, i jego kod, src/Form/MainForm.php.

Rysowanie okna

Edytor wizualny: paleta, okno i inspektor — Edytor wizualny

Otwórz forms/MainForm.form.yaml: wyświetla się w trybie Design (przyciski Code i Split pokazują plik).

Przeciągnij widżet z palety (po lewej) do okna albo kliknij go, aby dodać go po zaznaczeniu.
Przesuń widżet, przeciągając go; Del go usuwa, Ctrl+D powiela, Ctrl+Z cofa.
Inspektor (po prawej) ustawia wybrany widżet: jego tekst, styl, rozmiar (auto, fill lub liczba), udział w wolnym miejscu (Grow), wyrównanie.

Układ dopasowujący się do ekranu

Row (wiersz) ustawia widżety obok siebie, Column jeden pod drugim.
Spacer zajmuje wolne miejsce: umieszczony przed przyciskiem przesuwa go na koniec wiersza.
Grid układa widżety w 12 kolumnach. W inspektorze Columns (of 12) określa szerokość każdego z nich dla każdego rozmiaru ekranu: xs (telefon), sm (tablet), md i lg (duże ekrany). Na przykład 12 dla xs i 6 dla md: jeden panel w wierszu na telefonie, dwa obok siebie na PC.
Hidden on ukrywa widżet przy niektórych rozmiarach ekranu.

Przyciski PC, Laptop, Tablet, iPhone i Android na pasku narzędzi pokazują okno w każdym rozmiarze; w trybie PC przeciągnij krawędź okna, aby zobaczyć, jak zmienia się układ.

Podłączanie zdarzeń

Kliknij dwukrotnie widżet: IDE zapisuje jego metodę w kodzie (na przykład public function onAddClick(Button $sender): void) i otwiera ją, gotową do uzupełnienia:

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

Pozostałe zdarzenia (zmiana tekstu, wybór wiersza na liście…) są w sekcji Events inspektora. Każdy widżet z Id jest dostępny jako $this->jegoId, z podpowiadaniem.

Obrazy i filmy

Umieść obrazy w assets/images/: pole Picture widżetu Image (lub Image przycisku) je proponuje. Film bin/jumphp video contacts film.mp4 tnie na obrazy wraz z dźwiękiem, a widżet Video go odtwarza.

Uruchamianie i eksport

Przycisk Run edytora uruchamia aplikację. Dalej tak jak w przypadku gry: bin/jumphp build (wersja przeglądarkowa), bin/jumphp export:standalone (plik wykonywalny Windows lub Linux), bin/jumphp android i bin/jumphp apple (aplikacje na telefon).