Een grafische app maken met de visuele editor

Een grafische app van JumPHP is een PHP-programma waarvan de vensters formulieren zijn: knoppen, tekstvelden, lijsten, keuzelijsten, selectievakjes, schuifregelaars, afbeeldingen, video's. Geen HTML of CSS: de engine tekent ze zelf, en dezelfde app draait op pc, Mac, Linux, in de browser en op de telefoon (Android en iOS).

Het project maken

In de JumPHP IDE: New Project, dan Graphic app (een desktop-app) of Mobile app (een telefoon-app, staand). Op de opdrachtregel: bin/jumphp gui:new contacts "Contacts" (voeg --mobile toe voor een telefoon).

De voorbeeld-app heeft één venster, forms/MainForm.form.yaml, en de code ervan, src/Form/MainForm.php.

Het venster tekenen

Open forms/MainForm.form.yaml: het verschijnt in de modus Design (de knoppen Code en Split tonen het bestand).

• Sleep een widget uit het palet (links) naar het venster, of klik erop om het na de selectie toe te voegen.
• Verplaats een widget door het te slepen; Del verwijdert het, Ctrl+D dupliceert het, Ctrl+Z maakt ongedaan.
• De inspector (rechts) stelt het gekozen widget in: de tekst, de stijl, de grootte (auto, fill of een getal), het deel van de vrije ruimte (Grow), de uitlijning.

Een opmaak die zich aan het scherm aanpast

• Een Row (rij) zet de widgets naast elkaar, een Column onder elkaar.
• Een Spacer neemt de vrije ruimte in: vóór een knop geplaatst duwt hij die naar het einde van de rij.
• Een Grid zet de widgets in 12 kolommen. In de inspector geeft Columns (of 12) de breedte van elk widget per schermgrootte: xs (telefoon), sm (tablet), md en lg (grote schermen). Bijvoorbeeld 12 bij xs en 6 bij md: één paneel per regel op een telefoon, twee naast elkaar op een pc.
• Hidden on verbergt een widget bij sommige schermgroottes.

De knoppen PC, Laptop, Tablet, iPhone en Android van de werkbalk tonen het venster in elke grootte; sleep in de pc-modus aan de rand van het venster om de opmaak te zien veranderen.

De gebeurtenissen koppelen

Dubbelklik op een widget: de IDE schrijft de methode in de code (bijvoorbeeld public function onAddClick(Button $sender): void) en opent die, klaar om in te vullen:

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

De andere gebeurtenissen (de tekst die verandert, de regel die in een lijst gekozen wordt…) staan in het onderdeel Events van de inspector. Elk widget met een Id is bereikbaar als $this->zijnId, met aanvulling.

Afbeeldingen en video's

Zet je afbeeldingen in assets/images/: het veld Picture van een Image-widget (of Image van een knop) biedt ze aan. Voor een video knipt bin/jumphp video contacts film.mp4 die in afbeeldingen met het geluid, waarna het Video-widget hem afspeelt.

Starten en exporteren

De knop Run van de editor start de app. Daarna, net als bij een game: bin/jumphp build (de browserversie), bin/jumphp export:standalone (een uitvoerbaar bestand voor Windows of Linux), bin/jumphp android en bin/jumphp apple (de telefoon-apps).