Anatomia de um campo

Valor

Todos os campos precisam ter um valor, que é a fonte de verdade dos dados do campo. Pode ser de qualquer tipo (string, número, matriz, data etc.). Os campos podem usar validadores para restringir valores ou ser convertidos em um formato legível por máquina (por exemplo, a normalização de formatos de data).

Texto

Todos os campos contêm texto, que é uma string simples legível que representa o valor do campo. Isso não significa necessariamente que eles sejam iguais. Por exemplo, o texto em um campo booleano pode ser "Ativado" ou "Desativado", enquanto o valor é "verdadeiro" ou "falso".

Esse texto é o que aparece quando o bloco é recolhido, para fins de acessibilidade, e pode fazer parte da tela no bloco.

Campos editáveis e não editáveis

Em geral, os campos editáveis permitem que o usuário faça mudanças no código, enquanto os campos não editáveis exibem informações para o usuário sobre o bloco. Os campos editáveis podem mostrar um editor avançado quando clicados.

Os campos editáveis incluem:

Os campos não editáveis incluem:

Serialização

O valor de um campo serializável é codificado no formato de salvamento (JSON ou XML). Todos os campos editáveis são serializáveis porque os valores são dinâmicos. Os valores dos campos não editáveis geralmente não são dinâmicos, portanto, geralmente não são serializados.

Os campos serializados incluem:

Os campos não serializados incluem:

Observe como o campo "Label Serializável" não é editável, mas sim serializável. Isso significa que ele só pode ser editado de forma programática, e não por uma interface visível para o usuário. Depois de editado, o valor é codificado no JSON/XML gerado.

Geração de códigos

Além de conectar e desconectar blocos, os campos são a única maneira de o usuário controlar o código gerado pelo Blockly. O editor fornecido por um campo permite que o usuário modifique o valor armazenado pelo campo. O gerador do bloco pode acessar o valor do campo para uso no código gerado.

Para saber mais sobre como usar o valor de um campo em um gerador, consulte geração de código de campo.

Tela no bloco

A tela no bloco de um campo é uma coleção de elementos SVG que representam o valor do campo. Eles ocupam espaço no bloco e, à medida que mudam de tamanho, forçam o bloco a mudar de tamanho. A tela no bloco de um campo pode ser simples ou complexa, dependendo das necessidades.

Estes são alguns exemplos de diferentes telas em bloco, em ordem de complexidade crescente.

Tipo de campo Descrição
Rótulo Contém apenas um elemento de texto.
Ângulo Contém um retângulo de segundo plano, um elemento de texto e um símbolo de grau.
Tartaruga Contém um retângulo de segundo plano, elemento de texto e muitos elementos SVG usados para construir o gráfico da tartaruga.

Tela do editor

Quando um usuário clica em um campo editável, ele pode exibir um editor arbitrariamente complexo.

Estes são alguns exemplos de editores diferentes, em ordem de complexidade crescente.

Tipo de campo Descrição
Caixa de seleção Nenhum editor quando clicado. A tela no bloco é atualizada.
Entrada numérica Editor de texto sobreposto acima da tela no bloco. Os usuários podem digitar. O editor pode mudar de cor para indicar valores inválidos.
Seletor de ângulo O seletor de ângulos tem um editor de texto para digitar números e um editor arrastável para selecionar ângulos visualmente.

Outros modos de exibição

Modo recolhido: o usuário recolhe o bloco.O bloco mostra uma representação de texto dos valores, usando o texto retornado pelos campos individuais.

Bloco de tartarugas caindo

Modo de acessibilidade: os usuários podem estar usando um leitor de tela ou tecnologia semelhante para interagir com o Blockly. O texto do campo pode ser lido ao usuário.