Creare un'applicazione grafica con l'editor visuale

Un'applicazione grafica JumPHP è un programma PHP le cui finestre sono moduli: pulsanti, campi di testo, liste, liste a discesa, caselle di controllo, cursori, immagini, video. Niente HTML né CSS: il motore li disegna da sé, e la stessa applicazione funziona su PC, Mac, Linux, nel browser e sul telefono (Android e iOS).

Creare il progetto

Nel JumPHP IDE: New Project, poi Graphic app (un'applicazione desktop) o Mobile app (un'applicazione per telefono, in verticale). Da riga di comando: bin/jumphp gui:new contacts "Contacts" (aggiungi --mobile per un telefono).

L'applicazione di esempio ha una finestra, forms/MainForm.form.yaml, e il suo codice, src/Form/MainForm.php.

Disegnare la finestra

Apri forms/MainForm.form.yaml: si mostra in modalità Design (i pulsanti Code e Split mostrano il file).

• Trascina un widget dalla tavolozza (a sinistra) nella finestra, oppure cliccalo per aggiungerlo dopo la selezione.
• Sposta un widget trascinandolo; Canc lo elimina, Ctrl+D lo duplica, Ctrl+Z annulla.
• L'ispettore (a destra) regola il widget scelto: il testo, lo stile, la dimensione (auto, fill o un numero), la sua parte dello spazio libero (Grow), l'allineamento.

Un layout che si adatta allo schermo

• Una Row (riga) mette i suoi widget uno accanto all'altro, una Column uno sotto l'altro.
• Uno Spacer occupa lo spazio libero: messo prima di un pulsante, lo spinge alla fine della riga.
• Una Grid dispone i suoi widget in 12 colonne. Nell'ispettore, Columns (of 12) indica la larghezza di ciascuno per ogni dimensione dello schermo: xs (telefono), sm (tablet), md e lg (schermi grandi). Per esempio 12 in xs e 6 in md: un pannello per riga su un telefono, due affiancati su un PC.
• Hidden on nasconde un widget su alcune dimensioni dello schermo.

I pulsanti PC, Laptop, Tablet, iPhone e Android della barra degli strumenti mostrano la finestra a ogni dimensione; in modalità PC, trascina il bordo della finestra per vedere cambiare il layout.

Collegare gli eventi

Fai doppio clic su un widget: l'IDE scrive il suo metodo nel codice (per esempio public function onAddClick(Button $sender): void) e lo apre, pronto da completare:

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

Gli altri eventi (il testo che cambia, la riga scelta in una lista…) sono nella sezione Events dell'ispettore. Ogni widget con un Id è raggiungibile come $this->ilSuoId, con il completamento.

Immagini e video

Metti le tue immagini in assets/images/: il campo Picture di un widget Image (o Image di un pulsante) le propone. Per un video, bin/jumphp video contacts film.mp4 lo taglia in immagini con il suo audio, poi il widget Video lo riproduce.

Avviare ed esportare

Il pulsante Run dell'editor avvia l'applicazione. Poi, come per un gioco: bin/jumphp build (la versione per il browser), bin/jumphp export:standalone (un eseguibile Windows o Linux), bin/jumphp android e bin/jumphp apple (le applicazioni per telefono).