Crear una aplicación gráfica con el editor visual

Una aplicación gráfica JumPHP es un programa PHP cuyas ventanas son formularios: botones, campos de texto, listas, listas desplegables, casillas, deslizadores, imágenes, vídeos. Sin HTML ni CSS: el motor los dibuja él mismo, y la misma aplicación funciona en PC, Mac, Linux, en el navegador y en el móvil (Android e iOS).

Crear el proyecto

En el JumPHP IDE: New Project y luego Graphic app (una aplicación de escritorio) o Mobile app (una aplicación para móvil, en vertical). En la línea de comandos: bin/jumphp gui:new contacts "Contacts" (añade --mobile para un móvil).

La aplicación de ejemplo tiene una ventana, forms/MainForm.form.yaml, y su código, src/Form/MainForm.php.

Dibujar la ventana

Abre forms/MainForm.form.yaml: se muestra en modo Design (los botones Code y Split muestran el archivo).

• Arrastra un widget de la paleta (a la izquierda) a la ventana, o haz clic en él para añadirlo después de la selección.
• Mueve un widget arrastrándolo; Supr lo borra, Ctrl+D lo duplica, Ctrl+Z deshace.
• El inspector (a la derecha) ajusta el widget elegido: su texto, su estilo, su tamaño (auto, fill o un número), su parte del espacio libre (Grow), su alineación.

Un diseño que se adapta a la pantalla

• Una Row (fila) pone sus widgets uno al lado del otro, una Column uno debajo del otro.
• Un Spacer ocupa el espacio libre: colocado antes de un botón, lo empuja al final de la fila.
• Una Grid ordena sus widgets en 12 columnas. En el inspector, Columns (of 12) da el ancho de cada uno para cada tamaño de pantalla: xs (móvil), sm (tableta), md y lg (pantallas grandes). Por ejemplo 12 en xs y 6 en md: un panel por línea en un móvil, dos lado a lado en un PC.
• Hidden on oculta un widget en algunos tamaños de pantalla.

Los botones PC, Laptop, Tablet, iPhone y Android de la barra de herramientas muestran la ventana en cada tamaño; en modo PC, arrastra el borde de la ventana para ver cambiar el diseño.

Conectar los eventos

Haz doble clic en un widget: el IDE escribe su método en el código (por ejemplo public function onAddClick(Button $sender): void) y lo abre, listo para completar:

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

Los demás eventos (el texto que cambia, la línea elegida en una lista…) están en la sección Events del inspector. Cada widget que tiene un Id es accesible como $this->suId, con autocompletado.

Imágenes y vídeos

Pon tus imágenes en assets/images/: el campo Picture de un widget Image (o Image de un botón) las propone. Para un vídeo, bin/jumphp video contacts film.mp4 lo corta en imágenes con su sonido, y el widget Video lo reproduce.

Ejecutar y exportar

El botón Run del editor inicia la aplicación. Después, como para un juego: bin/jumphp build (la versión para navegador), bin/jumphp export:standalone (un ejecutable de Windows o Linux), bin/jumphp android y bin/jumphp apple (las aplicaciones móviles).