As ferramentas para desenvolvedores do Blockly
são uma ferramenta baseada na Web que automatiza partes do processo de configuração do Blockly,
incluindo a criação de blocos personalizados, a criação da caixa de ferramentas
e a configuração do espaço de trabalho do Blockly.
O processo de desenvolvimento do Blockly usando a ferramenta consiste em três partes:
- Crie blocos personalizados usando o Block Factory e o Block Exporter.
- Crie uma caixa de ferramentas e um espaço de trabalho padrão usando o Workspace Factory.
- Configure seu espaço de trabalho usando o Workspace Factory, um recurso disponível apenas na Web.
Guia "Bloquear fábrica"
A guia "Fábrica de blocos" ajuda a criar definições de blocos e geradores de código de blocos para blocos personalizados. Nessa guia, você pode criar, modificar e salvar blocos personalizados com facilidade.
Como definir um bloco
Este vídeo mostra em detalhes as etapas para definir um bloco. A interface está desatualizada, mas os recursos de bloco que ela destaca ainda são precisos.
Como gerenciar a biblioteca
Os blocos são referenciados pelo nome. Portanto, cada bloco que você quer criar precisa ter um nome exclusivo. A interface reforça isso e deixa claro quando você está "salvando" um novo bloco ou "atualizado" um bloco existente.
Você pode alternar entre blocos salvos anteriormente ou criar um novo bloco vazio clicando no botão "Biblioteca". Mudar o nome de um bloco existente é outra maneira de criar rapidamente vários blocos com definições semelhantes.
Como exportar e importar uma biblioteca
Os blocos são salvos no armazenamento local do navegador. Limpar o armazenamento local do navegador vai excluir seus blocos. Para salvar seus blocos indefinidamente, é necessário fazer o download da biblioteca. A biblioteca de blocos é transferida por download como um arquivo XML que pode ser importado para definir a biblioteca de blocos no estado em que ela estava quando você fez o download do arquivo. A importação de uma biblioteca de blocos substitui a atual. Portanto, exporte primeiro.
Os recursos de importação e exportação também são a maneira recomendada de manter e compartilhar diferentes conjuntos de blocos personalizados.
Guia "Exportador de blocos"
Depois de projetar os blocos, você vai precisar exportar as definições de bloco e os stubs do gerador para usá-los em um app. Isso é feito na guia "Block Exporter".
Todos os blocos armazenados na biblioteca vão aparecer no seletor de blocos. Clique no bloco para selecioná-lo ou desmarcar a opção de exportação. Se você quiser selecionar todos os blocos da biblioteca, use a opção "Select" → "All Stored In Block Library". Se você criou sua caixa de ferramentas ou configurou seu espaço de trabalho usando a guia "Workspace Factory", também é possível selecionar todos os blocos usados clicando em "Select" → "All Used In Workspace Factory".
Com as configurações de exportação, você pode escolher o idioma gerado que quer segmentar e se quer as definições, os stubs do gerador ou ambos para os blocos selecionados. Depois de selecionar, clique em "Exportar" para fazer o download dos arquivos.
Guia "Workspace Factory"
A Workspace Factory facilita a configuração de uma caixa de ferramentas e do conjunto padrão de blocos em um espaço de trabalho. Você pode alternar entre a edição da caixa de ferramentas e o espaço de trabalho inicial com os botões "Caixa de ferramentas" e "Espaço de trabalho".
Como criar uma caixa de ferramentas
Essa guia ajuda a criar o XML de uma caixa de ferramentas. O material pressupõe familiaridade com os recursos de uma Toolbox. Se você já tiver um XML para uma caixa de ferramentas que quer editar aqui, clique em "Carregar para editar" para fazer o upload.
Caixa de ferramentas sem categorias
Se você tiver alguns blocos e quiser exibi-los sem categorias, basta arrastá-los para o espaço de trabalho. Eles vão aparecer na caixa de ferramentas na visualização.
Caixa de ferramentas com categorias
Se você quiser mostrar blocos em categorias, clique no botão "+" e selecione o item do menu suspenso para nova categoria. Isso vai adicionar uma categoria à sua lista de categorias que você pode selecionar e editar. Selecione "Categoria padrão" para adicionar uma categoria padrão do Blockly (lógica, loops etc.) ou "Kit de ferramentas padrão" para adicionar todas as categorias padrão do Blockly. Use os botões de seta para reordenar as categorias.
Para mudar o nome ou a cor da categoria selecionada, use o menu suspenso "Editar categoria". Arrastar um bloco para o espaço de trabalho vai adicioná-lo à categoria selecionada.
Blocos avançados
Por padrão, é possível adicionar qualquer bloco padrão ou qualquer bloco da sua biblioteca à caixa de ferramentas. Se você tiver blocos definidos em JSON que não estão na sua biblioteca, importe-os usando o botão "Importar blocos personalizados".
Alguns blocos precisam ser usados juntos ou incluir padrões. Isso é feito com grupos e sombras. Todos os blocos conectados no editor são adicionados à caixa de ferramentas como um grupo. Os blocos anexados a outro bloco também podem ser alterados para blocos de sombra selecionando o bloco filho e clicando no botão "Fazer sombra". Observação: apenas blocos filhos que não contêm uma variável podem ser alterados para blocos de sombra.
Se você incluir um bloco de variável ou função na caixa de ferramentas, inclua uma categoria "Variáveis" ou "Funções" na caixa de ferramentas para permitir que os usuários utilizem o bloco totalmente. Saiba mais sobre as categorias "Variables" ou "Functions".
Como configurar um espaço de trabalho
Para configurar diferentes partes do seu espaço de trabalho, acesse a guia "Workspace Factory" e selecione "Workspace".
Escolher as opções do Workspace
Defina valores diferentes para as opções de configuração e confira o resultado na área de visualização. Ativar a grade ou o zoom revela mais opções para configurar. Além disso, a mudança para o uso de categorias geralmente requer um espaço de trabalho mais complexo. Uma lixeira e barras de rolagem são adicionadas automaticamente quando você adiciona a primeira categoria.
Adicionar blocos pré-carregados ao espaço de trabalho
Isso é opcional, mas pode ser necessário se você quiser mostrar um conjunto de blocos no espaço de trabalho:
- Quando o aplicativo é carregado.
- Quando um evento (avançar de nível, clicar em um botão de ajuda etc.) é acionado.
Arraste os blocos para o espaço de edição para conferir no seu espaço de trabalho na visualização. Você pode criar grupos de blocos, desativar blocos e fazer com que alguns blocos sejam blocos sombra ao selecioná-los.
É possível exportar esses blocos como XML (confira abaixo). Adicione-as ao seu espaço de trabalho com
Blockly.Xml.domToWorkspace, imediatamente após a criação:
var xmlText = '<xml xmlns="https://developers.google.com/blockly/xml">' +
'<block type="math_number"></block></xml>';
Blockly.Xml.domToWorkspace(Blockly.utils.xml.textToDom(xmlText), workspace);
Este código de exemplo adiciona um único bloco math_number ao espaço de trabalho.
Exportando
O Workspace Factory oferece as seguintes opções de exportação:
- Código inicial: produz HTML e JavaScript iniciais para injetar seu espaço de trabalho personalizado do Blockly.
- Caixa de ferramentas: produz XML para especificar a caixa de ferramentas.
- Blocos de espaço de trabalho: produz XML que pode ser carregado em um espaço de trabalho.