Sintaxe básica
Por que importa
A DSL do Proto-Typed define telas de forma declarativa: indentação, dois-pontos e blocos nomeados controlam hierarquia e fluxo. Dominar a sintaxe evita erros estruturais e garante que componentes, containers e ações se comportem como esperado em tempo de execução.
Forma canônica (sintaxe mínima)
Estrutura de tela com blocos aninhados
Por quê: ilustra identação obrigatória, uso de dois-pontos e blocos nomeados para organizar o conteúdo.
Padrões de uso
Declarar múltiplos blocos de topo
Quando usar: agrupar tela principal e overlays relacionados no mesmo arquivo. Por quê: mantém contexto de navegação próximo e facilita manutenção de fluxos completos.
Componentes reutilizáveis com indentação consistente
Quando usar: separar layout genérico dos dados que variam. Por quê: a sintaxe de componente + instância reduz duplicação mantendo alinhamento correto.
Listas textuais sem ações inline
Quando usar: apresentar itens somente textuais e agrupar as ações em blocos adequados.
Por quê: respeita a regra da DSL que restringe list a conteúdo textual puro.
Erros comuns (Do/Don’t)
❌ Errado — Bloco sem dois-pontos
✅ Correto — Dois-pontos obrigatório
Por quê: o parser depende do : para reconhecer o início do bloco.
❌ Errado — Indentação inconsistente
✅ Correto — Indentação uniforme
Por quê: indentação inconsistente gera nós desalinhados e erros de renderização.
❌ Errado — Nome não padrão
✅ Correto — Nome padrão de tela
Por quê: a engine conecta ações usando nomes exatos; seguir TitleCase evita referências quebradas.
Referências cruzadas
Relacionados
Screen: define o contêiner principal da hierarquia.Flow: organiza a navegação entre telas declaradas.Component Definition: detalha criação de blocos reutilizáveis.Text: descreve hierarquia tipográfica dentro dos blocos.
Composições recomendadas
- Sintaxe básica + Screen → garante telas válidas antes de pensar em estilo.
- Sintaxe básica + Component Definition → aplica padrões consistentes em coleções.
- Sintaxe básica + Flow → conecta telas respeitando nomes e indentação.
Tela com navegação correta
Por quê: mostra uso correto de nomes TitleCase e indentação para navegação bidirecional.