Layouts e desenho por dispositivo

Duas coisas desta página parecem-se e não são a mesma:

• Um layout é um desenho partilhado por vários ecrãs — o cabeçalho, a moldura, o rodapé que se repetem. Faz-se uma vez e usa-se em toda a parte.
• Um dispositivo é um desenho do mesmo ecrã para outro tamanho — a web, o tablet, o telemóvel. Cada um é independente.

Uma é sobre reutilizar entre ecrãs; a outra é sobre servir o mesmo ecrã em ecrãs de tamanhos diferentes.

#Layouts

Um layout é um documento como um ecrã — tem widgets e pode ter datastores — mas sem rota, sem parâmetros e sem regras de acesso. Não se navega para um layout: ele é o fundo de quem o usa.

#Criar um layout

1. Na barra lateral, separador UI, secção Ecrãs.
2. Clica no botão Novo layout, no cabeçalho da secção (ou, no menu ⋯ de uma pasta, para o criar lá dentro).
3. Escreve o Nome do layout — o campo sugere ex.: Base com cabeçalho.
4. Criar.

O layout fica na mesma árvore dos ecrãs (a nota di-lo: O layout fica na árvore dos ecrãs — arrasta-o para onde quiseres), com ícone próprio, e abre de imediato num separador.

#Desenhar um layout

O editor é o mesmo dos ecrãs — palette, canvas, inspector, os mesmos gestos e os mesmos atalhos (ver O canvas). As diferenças são de propósito:

No layout	Porquê
O crachá do cabeçalho mostra /layout.	Um layout não tem rota.
Não há Parâmetros de rota, Apresentação nem Eventos do ecrã.	Nada disso é do layout.
Em vez de Template do ecrã, o inspector tem Template base, com a linha Base.	Um layout pode assentar noutro.

#Pôr um layout num ecrã

1. Abre o ecrã e clica numa zona vazia do canvas (o inspector passa a mostrar o ecrã).
2. Abre a categoria Template do ecrã.
3. Na linha Layout, escolhe o layout. Para o tirar, escolhe — sem layout —.

A dica da categoria resume o contrato: Template por trás do conteúdo: os widgets do layout aparecem bloqueados; as propriedades e eventos configuram-se por ecrã.

#O que muda no ecrã

Os widgets do layout passam a aparecer no canvas do ecrã, por trás do conteúdo dele, e com um cadeado no canto. O que se pode e não se pode fazer com eles é uma regra fixa:

No ecrã, sobre um widget do layout
Mover, redimensionar, apagar, duplicar	Não. A posição edita-se no próprio layout.
Mudar propriedades (textos, cores, opções)	Sim — e a alteração é só deste ecrã.
Visível / Activo	Sim, por ecrã.
Eventos	Sim — o comportamento é sempre do ecrã.
Acesso e Valores da frase	Não. Definem-se no layout.

O inspector diz-te em que situação estás: Widget do layout: a posição edita-se no layout; propriedades, visibilidade e eventos são DESTE ecrã.

#Sem "zonas de conteúdo"

Não há slots nem áreas reservadas: o conteúdo do ecrã é sempre desenhado por cima do layout. Quem desenha o layout é que deixa o espaço livre onde os ecrãs vão escrever — um cabeçalho em cima, uma barra em baixo, e o meio vazio.

#Colisões e cadeias

Duas regras que a plataforma verifica e recusa quebrar:

• Ids e nomes únicos. Um ecrã e o seu layout não podem ter o mesmo id de widget nem o mesmo nome de datastore — Colisão com o layout: o id de widget "…" existe nos dois. Não há prefixos automáticos: o nome que escolheste é o nome que fica.
• No máximo 3 níveis, e sem voltas. Um layout pode assentar noutro (Template base), mas a cadeia pára aos três — A cadeia de layouts excede 3 níveis. — e um ciclo é recusado.

#Quando o layout muda

O ecrã guarda apenas qual é o layout e as alterações que fez a widgets dele. O desenho não é copiado — por isso mudar o layout muda todos os ecrãs que o usam, na hora, na app publicada.

Duas consequências práticas:

• No construtor, um separador de ecrã que já estava aberto não se actualiza sozinho quando gravas o layout: fecha e reabre o ecrã para o ver com a versão nova.
• Apagar um layout em uso não é impedido. Os ecrãs que o usavam passam a abrir sem ele, com o aviso O layout associado já não existe. — não partem, mas ficam sem a moldura.

#Desenho por dispositivo

Um ecrã tem três desenhos possíveis, um por dispositivo:

Dispositivo	Largura de referência
Web (1280px)	Computador.
Tablet (768px)	Tablet, e janelas estreitas.
Mobile (390px)	Telemóvel.

Comutam-se nos três botões à esquerda da barra do designer.

A grelha é a mesma nos três — 48 colunas — e o que muda é a largura de cada coluna. Um widget com 24 colunas ocupa metade da página em qualquer dispositivo; a altura, essa, conta-se sempre em píxeis.

#Não há herança

Esta é a regra que explica tudo o resto: cada dispositivo tem a sua árvore de widgets, completa e independente. Não existe "esconder na web e mostrar no telemóvel" entre árvores — o que não está na árvore de um dispositivo não existe nesse dispositivo.

A web existe sempre. O tablet e o telemóvel podem estar por desenhar — e nesse caso a app serve o desenho web, comprimido para a largura real. É um recuo para servir, não herança: continuam a ser desenhos separados no momento de editar.

#Começar o desenho de um dispositivo

Escolhe Tablet (768px) ou Mobile (390px) num ecrã que ainda não os tenha e o designer mostra o cartão Este dispositivo ainda não tem desenho, com a explicação — Cada dispositivo tem o seu desenho próprio. Enquanto este não existir, o runtime serve o desenho web. — e dois caminhos:

Botão	O que faz
Copiar do web	Duplica o desenho web como ponto de partida. Os ids dos widgets mantêm-se (as ligações a dados e o código continuam a encontrá-los) e as larguras reajustam-se por serem em colunas.
Começar vazio	Uma folha em branco, para desenhar de raiz.

A cópia acontece uma vez. A partir daí os desenhos seguem vidas separadas: mexer na web não mexe no telemóvel.

#Ocultar widgets neste dispositivo

Dentro de um dispositivo, o separador Estrutura do inspector tem um olho em cada widget: Ocultar neste dispositivo / Mostrar neste dispositivo. Um widget oculto continua na árvore e continua editável a partir da Estrutura — só não sai no ecrã.

Se o que está oculto é o contentor, os filhos vão com ele — e o olho deles explica-o: Oculto por um contentor-pai.

#A altura da página

A altura é por dispositivo: um telemóvel pode ter uma página muito mais alta do que a web para o mesmo ecrã. Arrasta o bordo inferior do canvas (Altura da página — arrastar para ajustar) para a mudar.

Quando a página é mais alta do que o dispositivo, o canvas desenha uma linha tracejada com a etiqueta fundo do viewport — é ali que acaba o que se vê sem fazer scroll. Tudo o que estiver abaixo dessa linha só aparece a quem rolar a página.

#O que a app serve

Na app publicada, o dispositivo é escolhido pela largura da janela: abaixo de 640 px é telemóvel, abaixo de 1024 px é tablet, acima disso é web. Redimensionar a janela muda o desenho servido, ali mesmo.

Sem desenho para o dispositivo detectado, é servido o web. Na app móvel nativa, esse recuo é anunciado — Este ecrã não tem desenho para telemóvel — a mostrar o desenho web.

O botão Pré-visualizar abre o ecrã na app real; para ver como fica noutro tamanho, muda o tamanho da janela do browser.

#Eventos, ids e dispositivos

Como cada dispositivo é uma árvore, o mesmo id de widget pode existir nos três — é de propósito, é "o mesmo widget lógico noutro tamanho". Mas cada um tem as suas propriedades e o seu código: mudar o onClick do botão na web não muda o do telemóvel.

Ao escrever código (ver Eventos e o SDK), lembra-te que keplin.widgets.get("...") só encontra widgets do dispositivo que está a correr. Um widget que só existe na web dá erro no telemóvel.

#Layouts e dispositivos, juntos

As duas coisas combinam-se pela mesma regra: o layout é composto por dispositivo. Um layout desenhado só na web aparece também nas árvores de tablet e telemóvel dos ecrãs que o usam, servindo o seu próprio desenho web — e um layout com desenho próprio para telemóvel serve esse.

#Como decidir

Situação	O caminho
O mesmo cabeçalho em 20 ecrãs.	Um layout.
Um ecrã complexo que no telemóvel tem de ser outra coisa.	Um desenho de telemóvel próprio.
Um botão que não faz sentido no telemóvel.	O olho da Estrutura no dispositivo telemóvel.
Um menu diferente no telemóvel.	O editor de Navegação, no dispositivo telemóvel.
Uma app que só vai ser usada no computador.	Desenha só a web e não penses mais nisso.

#Porque não…?

• Porque não consigo mexer neste widget? Tem cadeado: vem do layout. Abre o layout e mexe lá — no ecrã só mudas propriedades, visibilidade e eventos.
• Porque não me deixa escolher o layout? Há colisão: o ecrã e o layout têm o mesmo id de widget ou o mesmo nome de datastore. Renomeia um dos dois.
• Porque é que o ecrã não mostra as alterações que fiz ao layout? O separador do ecrã estava aberto. Fecha e reabre.
• Porque é que o telemóvel mostra o desenho da web todo apertado? Aquele ecrã não tem desenho de telemóvel. Escolhe Mobile (390px) e usa Copiar do web ou Começar vazio.
• Porque é que mexi na web e o telemóvel não mudou? Porque são desenhos independentes. A cópia só acontece no momento em que crias o dispositivo.
• Porque desapareceu a moldura de todos os ecrãs? O layout foi apagado. Os ecrãs avisam O layout associado já não existe. — cria-o outra vez e volta a escolhê-lo em Template do ecrã.