Criar uma aplicação gráfica com o editor visual

Uma aplicação gráfica JumPHP é um programa PHP cujas janelas são formulários: botões, campos de texto, listas, listas suspensas, caixas de seleção, controlos deslizantes, imagens, vídeos. Sem HTML nem CSS: o motor desenha-os ele próprio, e a mesma aplicação funciona em PC, Mac, Linux, no navegador e no telemóvel (Android e iOS).

Criar o projeto

No JumPHP IDE: New Project, depois Graphic app (uma aplicação de secretária) ou Mobile app (uma aplicação para telemóvel, em vertical). Na linha de comandos: bin/jumphp gui:new contacts "Contacts" (acrescente --mobile para um telemóvel).

A aplicação de exemplo tem uma janela, forms/MainForm.form.yaml, e o seu código, src/Form/MainForm.php.

Desenhar a janela

Abra forms/MainForm.form.yaml: aparece no modo Design (os botões Code e Split mostram o ficheiro).

• Arraste um widget da paleta (à esquerda) para a janela, ou clique nele para o acrescentar depois da seleção.
• Mova um widget arrastando-o; Del apaga-o, Ctrl+D duplica-o, Ctrl+Z anula.
• O inspetor (à direita) ajusta o widget escolhido: o texto, o estilo, o tamanho (auto, fill ou um número), a sua parte do espaço livre (Grow), o alinhamento.

Um layout que se adapta ao ecrã

• Uma Row (linha) põe os seus widgets lado a lado, uma Column uns por baixo dos outros.
• Um Spacer ocupa o espaço livre: colocado antes de um botão, empurra-o para o fim da linha.
• Uma Grid arruma os seus widgets em 12 colunas. No inspetor, Columns (of 12) dá a largura de cada um para cada tamanho de ecrã: xs (telemóvel), sm (tablet), md e lg (ecrãs grandes). Por exemplo 12 em xs e 6 em md: um painel por linha num telemóvel, dois lado a lado num PC.
• Hidden on esconde um widget em alguns tamanhos de ecrã.

Os botões PC, Laptop, Tablet, iPhone e Android da barra de ferramentas mostram a janela em cada tamanho; no modo PC, arraste a margem da janela para ver o layout mudar.

Ligar os eventos

Faça duplo clique num widget: o IDE escreve o seu método no código (por exemplo public function onAddClick(Button $sender): void) e abre-o, pronto a preencher:

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

Os outros eventos (o texto que muda, a linha escolhida numa lista…) estão na secção Events do inspetor. Cada widget com um Id é acessível como $this->oSeuId, com autocompletar.

Imagens e vídeos

Coloque as suas imagens em assets/images/: o campo Picture de um widget Image (ou Image de um botão) propõe-nas. Para um vídeo, bin/jumphp video contacts film.mp4 corta-o em imagens com o seu som, depois o widget Video reprodu-lo.

Executar e exportar

O botão Run do editor inicia a aplicação. Depois, como para um jogo: bin/jumphp build (a versão para navegador), bin/jumphp export:standalone (um executável Windows ou Linux), bin/jumphp android e bin/jumphp apple (as aplicações para telemóvel).