Créer une application graphique avec l'éditeur visuel

Une application graphique JumPHP est un programme PHP dont les fenêtres sont des formulaires : boutons, champs de texte, listes, listes déroulantes, cases à cocher, curseurs, images, vidéos. Pas de HTML ni de CSS : le moteur les dessine lui-même, et la même application tourne sur PC, Mac, Linux, dans le navigateur et sur téléphone (Android et iOS).

Créer le projet

Dans le JumPHP IDE : New Project, puis Graphic app (une application de bureau) ou Mobile app (une application pour téléphone, en portrait). En ligne de commande : bin/jumphp gui:new contacts "Contacts" (ajoutez --mobile pour un téléphone).

L'application d'exemple a une fenêtre, forms/MainForm.form.yaml, et son code, src/Form/MainForm.php.

Dessiner la fenêtre

Ouvrez forms/MainForm.form.yaml : il s'affiche en mode Design (les boutons Code et Split montrent le fichier).

• Glissez un widget de la palette (à gauche) dans la fenêtre, ou cliquez dessus pour l'ajouter après la sélection.
• Déplacez un widget en le faisant glisser ; Suppr l'efface, Ctrl+D le duplique, Ctrl+Z annule.
• L'inspecteur (à droite) règle le widget choisi : son texte, son style, sa taille (auto, fill ou un nombre), sa part de la place libre (Grow), son alignement.

La mise en page qui s'adapte à l'écran

• Une Row (ligne) met ses widgets côte à côte, une Column l'un sous l'autre.
• Un Spacer prend la place libre : placé avant un bouton, il le pousse au bout de la ligne.
• Une Grid range ses widgets en 12 colonnes. Dans l'inspecteur, Columns (of 12) donne la largeur de chacun pour chaque taille d'écran : xs (téléphone), sm (tablette), md et lg (grands écrans). Par exemple 12 en xs et 6 en md : un panneau par ligne sur un téléphone, deux côte à côte sur un PC.
• Hidden on cache un widget sur certaines tailles d'écran.

Les boutons PC, Laptop, Tablet, iPhone et Android de la barre d'outils montrent la fenêtre à chaque taille ; en mode PC, tirez le bord de la fenêtre pour voir la mise en page changer.

Câbler les événements

Double-cliquez sur un widget : l'IDE écrit sa méthode dans le code (par exemple public function onAddClick(Button $sender): void) et l'ouvre, prête à remplir :

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

Les autres événements (le texte qui change, la ligne choisie dans une liste…) sont dans la section Events de l'inspecteur. Chaque widget qui a un Id est accessible par $this->sonId, avec la complétion.

Images et vidéos

Mettez vos images dans assets/images/ : le champ Picture d'un widget Image (ou Image d'un bouton) les propose. Pour une vidéo, bin/jumphp video contacts film.mp4 la découpe en images avec son son, puis le widget Video la joue.

Lancer et exporter

Le bouton Run de l'éditeur lance l'application. Ensuite, comme pour un jeu : bin/jumphp build (la version navigateur), bin/jumphp export:standalone (un exécutable Windows ou Linux), bin/jumphp android et bin/jumphp apple (les applications de téléphone).