Eine grafische App mit dem visuellen Editor erstellen

Eine grafische App von JumPHP ist ein PHP-Programm, dessen Fenster Formulare sind: Buttons, Textfelder, Listen, Dropdown-Listen, Kontrollkästchen, Schieberegler, Bilder, Videos. Kein HTML und kein CSS: Die Engine zeichnet sie selbst, und dieselbe App läuft auf PC, Mac, Linux, im Browser und auf dem Handy (Android und iOS).

Das Projekt anlegen

Im JumPHP IDE: New Project, dann Graphic app (eine Desktop-App) oder Mobile app (eine Handy-App im Hochformat). In der Kommandozeile: bin/jumphp gui:new contacts "Contacts" (mit --mobile für ein Handy).

Die Beispiel-App hat ein Fenster, forms/MainForm.form.yaml, und seinen Code, src/Form/MainForm.php.

Das Fenster zeichnen

Öffne forms/MainForm.form.yaml: Es erscheint im Modus Design (die Buttons Code und Split zeigen die Datei).

• Ziehe ein Widget aus der Palette (links) ins Fenster oder klicke darauf, um es nach der Auswahl einzufügen.
• Verschiebe ein Widget durch Ziehen; Entf löscht es, Strg+D dupliziert es, Strg+Z macht rückgängig.
• Der Inspektor (rechts) stellt das gewählte Widget ein: seinen Text, seinen Stil, seine Größe (auto, fill oder eine Zahl), seinen Anteil am freien Platz (Grow), seine Ausrichtung.

Ein Layout, das sich dem Bildschirm anpasst

• Eine Row (Zeile) setzt ihre Widgets nebeneinander, eine Column untereinander.
• Ein Spacer nimmt den freien Platz ein: Vor einem Button schiebt er ihn ans Ende der Zeile.
• Ein Grid ordnet seine Widgets in 12 Spalten an. Im Inspektor gibt Columns (of 12) die Breite jedes Widgets für jede Bildschirmgröße an: xs (Handy), sm (Tablet), md und lg (große Bildschirme). Zum Beispiel 12 bei xs und 6 bei md: ein Bereich pro Zeile auf dem Handy, zwei nebeneinander auf dem PC.
• Hidden on blendet ein Widget bei bestimmten Bildschirmgrößen aus.

Die Buttons PC, Laptop, Tablet, iPhone und Android der Werkzeugleiste zeigen das Fenster in jeder Größe; im PC-Modus ziehst du am Fensterrand, um das Layout sich ändern zu sehen.

Die Ereignisse verdrahten

Doppelklicke auf ein Widget: Das IDE schreibt seine Methode in den Code (zum Beispiel public function onAddClick(Button $sender): void) und öffnet sie, bereit zum Ausfüllen:

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

Die anderen Ereignisse (der Text, der sich ändert, die in einer Liste gewählte Zeile…) stehen im Abschnitt Events des Inspektors. Jedes Widget mit einer Id ist als $this->seineId erreichbar, mit Autovervollständigung.

Bilder und Videos

Lege deine Bilder in assets/images/: Das Feld Picture eines Image-Widgets (oder Image eines Buttons) bietet sie an. Für ein Video zerlegt bin/jumphp video contacts film.mp4 es mit seinem Ton in Bilder, dann spielt das Video-Widget es ab.

Starten und exportieren

Der Button Run des Editors startet die App. Danach wie bei einem Spiel: bin/jumphp build (die Browser-Version), bin/jumphp export:standalone (eine ausführbare Datei für Windows oder Linux), bin/jumphp android und bin/jumphp apple (die Handy-Apps).