O canvas

Os ecrãs de uma app desenham-se num editor visual: arrastas widgets de uma palette para um canvas, posicionas ao pixel com a ajuda de uma grelha e de guias inteligentes, e afinas cada detalhe num inspector à direita. Esta página explica esse ambiente de trabalho — tudo o que vem depois (widgets, dados, eventos) acontece dentro dele.

Os exemplos são da app Gestão de Clientes: um CRM com ecrãs de contas, oportunidades e dashboards.

#Abrir e criar ecrãs

Os ecrãs vivem na barra lateral da app, no separador UI, dentro da secção Ecrãs. Clicar num ecrã abre-o num separador do espaço de trabalho — podes ter vários ecrãs abertos lado a lado, e cada separador lembra-se do que estava a fazer.

Para criar um ecrã:

1. Abre a app e escolhe o separador UI na barra lateral.
2. Na secção Ecrãs, clica no botão Novo ecrã.
3. Dá-lhe um nome — por exemplo, Ficha de Cliente — e confirma com Criar.
4. O ecrã abre de imediato no espaço de trabalho, pronto a desenhar.

A mesma secção tem pastas (Nova pasta) para organizares a árvore, os ecrãs de Sistema (login, recuperação de password e registo — com rota e parâmetros fixos) e os layouts — templates reutilizáveis que ficam para o capítulo Layouts e desenho por dispositivo.

#As três zonas do designer

Zona	O que é
Widgets (esquerda)	O catálogo de widgets. Arrasta qualquer um para o canvas — a dica no próprio item diz-te: Arrasta para o canvas.
Canvas (centro)	A página do ecrã, desenhada à escala real do dispositivo activo, já com o tema da app aplicado. O que vês é o que a app mostra.
Inspector (direita)	As propriedades do que está seleccionado — ou do próprio ecrã, quando não há selecção. Tem dois separadores: Propriedades e Estrutura.

Por cima do canvas está a barra de ferramentas: os três dispositivos (Web (1280px), Tablet (768px), Mobile (390px)), undo/redo, camadas, duplicar, apagar, alinhar/distribuir, Pré-visualizar e o zoom (Ampliar, Reduzir, e a percentagem clicável para Repor 100%).

#A grelha

O canvas assenta numa grelha que mantém os ecrãs arrumados sem te prender:

• Na horizontal, a página divide-se em 48 colunas. A posição e a largura de um widget contam-se em colunas — é o que faz um ecrã desenhado em web continuar proporcional num modal mais estreito.
• Na vertical, o encaixe é em passos de 8 píxeis; a posição e a altura guardam-se ao pixel.

Ao arrastar, o widget encaixa na coluna e no passo vertical mais próximos. Se precisares de o largar exactamente onde está o rato, mantém a tecla Alt durante o arrasto — o encaixe desliga-se enquanto ela estiver premida.

Os mesmos valores podem ser escritos à mão: com um widget seleccionado, a categoria Layout do inspector mostra Col, Larg (em colunas), Y e Alt (em píxeis).

#Seleccionar, mover, redimensionar

• Clique selecciona um widget; Shift+clique acrescenta ou tira da selecção; arrastar a partir de uma zona vazia desenha uma caixa de selecção que apanha tudo o que tocar.
• Arrasta um widget para o mover; puxa pelas pegas dos cantos e das arestas para o redimensionar.
• As setas do teclado movem a selecção: ←/→ uma coluna, ↑/↓ um pixel — e Shift+↑/↓ oito píxeis de cada vez.
• Largar um widget dentro de um Painel, de umas Abas ou de uma Barra fixa torna-o filho desse contentor: passa a mover-se com ele e a posição fica relativa ao contentor.

#Guias inteligentes

Enquanto arrastas ou redimensionas, o canvas compara o widget em movimento com os vizinhos e sugere encaixes — as guias desenham-se na hora:

Guia	Quando aparece
Alinhamento	Uma aresta ou o centro do widget fica alinhado com a aresta/centro de um vizinho — o widget cola-se a essa linha.
Espaçamento igual	Estás a largar o widget à mesma distância a que dois vizinhos já estão um do outro — a fila fica com intervalos certos.
Tamanho igual	Ao redimensionar, a largura ou a altura fica igual à de um vizinho — cola nesse tamanho.

O alinhamento ganha ao espaçamento, e o espaçamento ganha à grelha: quando estás visivelmente a tentar encostar a uma aresta, é isso que acontece.

#Alinhar e distribuir

Com dois ou mais widgets seleccionados, a barra de ferramentas activa os botões de alinhamento: Alinhar à esquerda, Centrar na horizontal, Alinhar à direita, Alinhar ao topo, Centrar na vertical e Alinhar à base. Com três ou mais, juntam-se Distribuir na horizontal e Distribuir na vertical, que igualam os intervalos mantendo o primeiro e o último no sítio.

Com vários widgets seleccionados o inspector resume: N widgets seleccionados — usa a barra para alinhar/distribuir.

#Camadas

Widgets podem sobrepor-se — uma Etiqueta por cima de uma Imagem, por exemplo. A ordem controla-se na barra de ferramentas: Trazer para a frente, Avançar uma camada, Recuar uma camada e Enviar para trás.

#Âncoras — amarrar às margens

Por omissão, um widget fica onde o pousaste. As âncoras amarram arestas do widget às margens da página (ou do contentor onde está): selecciona um widget e clica nos pinos que aparecem a meio de cada aresta — Amarrar ao topo, Amarrar à esquerda, Amarrar à direita, Amarrar ao fundo.

• Amarrar esquerda + direita faz o widget esticar com a largura da página — o clássico cabeçalho a toda a largura.
• Amarrar ao fundo cola o widget ao fundo da página — uma barra de botões que fica em baixo, tenha a página a altura que tiver.

#A altura da página

A página de um ecrã tem altura fixa por dispositivo — nunca cresce sozinha com o conteúdo. O bordo inferior do canvas é uma pega: arrasta-a para ajustar (Altura da página — arrastar para ajustar). Abaixo do conteúdo, o fundo do ecrã continua até ao fim (o fundo continua até ao fim do ecrã). Se o conteúdo passar da altura, o utilizador faz scroll — salvo se o desligares (ver as propriedades do ecrã).

#Desfazer, refazer e os atalhos

Cada gesto — largar, mover, redimensionar, mudar uma propriedade, apagar — é um passo de histórico. Desfazer (Ctrl+Z) e Refazer (Ctrl+Shift+Z) estão na barra; movimentos de teclado seguidos fundem-se num só passo, para o undo não ter de recuar tecla a tecla.

Atalho	Acção
Ctrl+Z / Ctrl+Shift+Z (ou Ctrl+Y)	Desfazer / Refazer
Ctrl+C / Ctrl+X / Ctrl+V	Copiar / Cortar / Colar (a cópia entra deslocada uma coluna)
Ctrl+D	Duplicar a selecção
Ctrl+A	Seleccionar todos os widgets do dispositivo activo
Delete ou Backspace	Apagar a selecção
Escape	Limpar a selecção
Setas / Shift+↑↓	Mover a selecção (coluna a coluna; 1 px; 8 px)
Ctrl+roda do rato	Zoom

Em Mac, usa ⌘ onde se lê Ctrl.

#Gravação automática e pré-visualizar

Não há botão de gravar: as alterações gravam-se sozinhas. O canto superior direito diz em que pé estão — A gravar…, Gravado, ou Falha a gravar — tenta outra vez se algo correu mal (basta mexer de novo para repetir).

O botão Pré-visualizar grava o que estiver pendente e abre o ecrã na app real, num separador novo do browser — passas pelo login como qualquer utilizador e vês o ecrã a funcionar com dados verdadeiros.

#O inspector

O inspector tem dois separadores:

• Propriedades — tudo o que é editável no que está seleccionado.
• Estrutura — a árvore de widgets do dispositivo activo.

#Propriedades de um widget

Com um widget seleccionado, o topo do inspector mostra o tipo e o id do widget (em letra monoespaçada) — é este id que usas no código dos eventos. As propriedades organizam-se em categorias; cada widget mostra só as que lhe dizem respeito:

Categoria	O que contém
Layout	Col, Larg, Y, Alt, e os interruptores Visível e Activo (um widget inactivo fica cinzento e sem interacção).
Acesso	Exige a acção — uma acção declarada em Definições ▸ Permissões; quem não a tiver não usa o widget. Em Sem a acção escolhes Esconder ou Mostrar desactivado.
Conteúdo	Textos, etiquetas, ícones — e os Valores da frase (ver abaixo).
Dados	A ligação a dados do widget (ver Datastores e dados).
Comportamento	Opções de funcionamento — vistas, arrastos, acções ao clicar.
Validação	Nos campos de formulário: Obrigatório, regras standard e script (ver Widgets).
Interacção	Acções de clique de widgets como o Botão.
Aspecto	Estilo visual (ver abaixo).
Eventos	Os eventos do widget (ver Eventos e o SDK).

Alguns widgets têm elementos internos editáveis — uma coluna da Tabela, um campo da Lista, uma aba das Abas. Clica no elemento directamente no canvas para o editar; o inspector muda para esse elemento e o botão voltar ao widget traz-te de volta.

#Aspecto

A categoria Aspecto é igual em (quase) todos os widgets: Fundo, Borda com Traço da borda (Contínuo, Tracejado, Pontilhado), raio, padding, Sombra (Sem sombra, Suave, Média, Forte, Extra), e as opções de Texto — cor, Tamanho, Peso, Alinhar texto. As cores aceitam os tokens do tema da app ou valores hex — usa os tokens sempre que possível, para o widget acompanhar o tema.

Widgets com cabeçalho próprio (painéis, tabelas, gráficos…) acrescentam aqui Mostrar título e Mostrar descrição, com os respectivos textos.

#Regras de formatação

Ainda no Aspecto, as Regras de formatação mudam o estilo conforme os dados: pintar de vermelho as linhas atrasadas, esconder um botão consoante a sessão, pôr um KPI a verde acima do alvo.

1. Clica em Nova regra.
2. Escolhe o âmbito — O widget, Cada linha ou Uma célula (linha/célula só existem em widgets que desenham linhas, como a Tabela).
3. Em Quando, adiciona condições (campo, operador, valor — o valor pode vir de um parâmetro, da sessão, do estado…). Sem condições, a regra aplica-se sempre.
4. Em Então, escolhe o que muda: Fundo, Cor do texto, Negrito, Itálico, Sublinhado, Alinhamento, Formato ou Esconder.

A ordem conta — a última regra que bater é a que manda. O interruptor Activa desliga uma regra sem a apagar, para experimentares. E o código dos eventos tem sempre a última palavra sobre as regras.

#Valores da frase

Qualquer texto de um widget pode ter buracos: escreve {n} no texto (por exemplo, "{n} contas activas") e a secção Valores da frase aparece na categoria Conteúdo, para dizeres de onde vem cada valor — de um datastore, de um parâmetro, da sessão, do estado ou de outro widget. É a forma de pôr números vivos dentro de frases traduzíveis sem escrever código.

#O separador Estrutura

O separador Estrutura lista todos os widgets do dispositivo activo, em árvore (contentores com os filhos dentro). Serve para seleccionar o que está tapado, ver o que está oculto (Oculto por um contentor-pai) e comutar a visibilidade inicial de cada widget com o olho — Ocultar neste dispositivo / Mostrar neste dispositivo.

#O ecrã e as suas propriedades

Clica numa zona vazia do canvas (ou carrega em Escape) e o inspector passa a mostrar o próprio ecrã:

Secção	O que define
Ecrã	O nome e a Rota — o caminho do ecrã no endereço da app (minúsculas, números e hífens).
Parâmetros de rota	Os parâmetros que o ecrã recebe no endereço (ex.: o id da conta em /ficha-de-conta/:id). Cada um pode ser Obrigatório; a ordem ajusta-se com Subir/Descer.
Comportamento	Scroll do ecrã — Automático ou Sem scroll.
Acesso	Ecrã público (sem sessão) — o ecrã abre sem login; os dados vêm apenas de APIs públicas.
Aspecto	O fundo da página: Cor, Imagem (assets) e Ajuste (Cobrir, Conter, Esticar, Centrar, Repetir).
Apresentação	Se o ecrã é uma página normal, um Modal (centro) ou um Painel lateral (direita) — detalhado em Eventos e o SDK.
Template do ecrã	O Layout associado — ver Layouts e desenho por dispositivo.
Dados	Os datastores do ecrã — ver Datastores e dados.
Eventos	Os eventos do ecrã (onLoad, onParamsChange, onUnload) — ver Eventos e o SDK.

#Porque não…?

• Porque não consigo mover um widget? Se aparece com um cadeado, vem de um layout — a posição edita-se no próprio layout, não no ecrã. Ver Layouts e desenho por dispositivo.
• Porque é que o widget não encaixa onde quero? As guias e a grelha estão a ganhar ao teu gesto — mantém Alt para desligar o encaixe enquanto arrastas.
• Porque desapareceu o widget do canvas? Vê a Estrutura: pode estar oculto (olho), dentro de uma aba que não está activa, ou atrás de outro widget (usa as camadas).