As Ferramentas para desenvolvedores da Blockly
são ferramentas para desenvolvedores baseadas na Web que automatizam 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 na Web.
O processo de desenvolvedor da Blockly que usa a ferramenta consiste em três partes:
- Crie blocos personalizados usando o Block Factory e o Block Exporter.
- Criar uma caixa de ferramentas e um espaço de trabalho padrão usando o Workspace Factory.
- Configure o espaço de trabalho usando o Workspace Factory, um recurso disponível apenas para a Web.
Bloquear a guia "Fábrica"
A guia "Block Factory" ajuda a criar definições de bloco e geradores de código de bloco para blocos personalizados. Nesta guia, você pode criar, modificar e salvar blocos personalizados facilmente.
Como definir um bloco
Este vídeo mostra em detalhes as etapas de definição de um bloco. A interface está desatualizada, mas os recursos de bloco destacados ainda são precisos.
Gerenciamento da biblioteca
Os blocos são referenciados pelo nome. Portanto, cada bloco que você quer criar precisa ter um nome exclusivo. A interface aplica isso e deixa claro quando você está "salvando" um novo bloco ou "atualizando" um bloco existente.
É possível alternar entre os blocos salvos anteriormente ou criar um novo bloco vazio clicando no botão "Biblioteca". Alterar o nome de um bloco existente é outra maneira de criar rapidamente vários blocos com definições semelhantes.
Exportar e importar uma biblioteca
Os blocos são salvos no armazenamento local do navegador. Limpar o armazenamento local do navegador excluirá os blocos. Para salvar os bloqueios indefinidamente, faça o download da sua biblioteca. O download da biblioteca de blocos é feito como um arquivo XML que pode ser importado para definir o estado em que a biblioteca estava quando você fez o download do arquivo. A importação de uma biblioteca Block substitui a atual, então é recomendável exportá-la 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 "Bloquear exportador"
Depois de projetar seus blocos, você precisará exportar as definições de bloco e os stubs do gerador para usá-los em um app. Isso é feito na guia "Bloquear exportador".
Todos os blocos armazenados na sua Biblioteca de bloqueio são exibidos no seletor de bloqueio. Clique no bloco para marcá-lo ou desmarcá-lo para exportação. Se você quiser selecionar todos os blocos da biblioteca, use a opção "Selecionar" → "Todos os blocos armazenados na biblioteca de blocos". Se você criou a caixa de ferramentas ou configurou o espaço de trabalho usando a guia "Workspace Factory", também pode selecionar todos os blocos usados clicando em "Selecionar" → "All Usado no Workspace Factory".
As configurações de exportação permitem escolher qual idioma gerado você quer segmentar e se quer as definições, os stubs do gerador ou ambos para os blocos selecionados. Depois de selecionar essas opções, clique em "Exportar" para fazer o download dos arquivos.
Guia "Fábrica" do Workspace
A Workspace Factory facilita a configuração de uma caixa de ferramentas e o conjunto padrão de blocos em um espaço de trabalho. É possível 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
Esta guia ajuda a criar o XML de uma caixa de ferramentas. O material pressupõe familiaridade com os recursos de uma Caixa de ferramentas. Se você já tem o XML para uma caixa de ferramentas que quer editar aqui, carregue-o clicando em "Load to Edit".
Caixa de ferramentas sem categorias
Se você tiver alguns blocos e quiser mostrá-los sem nenhuma categoria, basta arrastá-los para o espaço de trabalho e eles vão aparecer na caixa de ferramentas na visualização.
Caixa de ferramentas com categorias
Se você quiser exibir blocos em categorias, clique no botão "+" e selecione o item do menu suspenso para a nova categoria. Isso adicionará uma categoria à 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 "Caixa 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". Ao arrastar um bloco para o espaço de trabalho, ele será adicionado à categoria selecionada.
Bloqueios avançados
Por padrão, você pode adicionar qualquer um dos blocos padrão ou blocos da 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 "Import Custom Blocks".
Alguns blocos precisam ser usados em conjunto ou incluir padrões. Isso é feito com grupos e sombras. Todos os blocos conectados no editor serão adicionados à caixa de ferramentas como um grupo. Blocos anexados a outro bloco também podem ser alterados para blocos de sombra selecionando o bloco filho e clicando no botão "Make Shadow". Observação: somente blocos filhos que não contêm uma variável podem ser alterados para blocos de sombra.
Se você incluir uma variável ou um bloco de função na caixa de ferramentas, inclua uma categoria "Variáveis" ou "Funções" nela para permitir que os usuários aproveitem totalmente o bloco. Saiba mais sobre as categorias "Variáveis" ou "Funções".
Como configurar um espaço de trabalho (para o Blockly da Web)
Para configurar diferentes partes do espaço de trabalho, acesse a guia "Workspace Factory" e selecione "Workspace".
Escolha as opções do espaço de trabalho
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, mudar 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 sua primeira categoria.
Adicionar blocos pré-carregados ao espaço de trabalho
Isso é opcional, mas pode ser necessário se você quiser exibir um conjunto de blocos no espaço de trabalho:
- Quando o aplicativo é carregado.
- Quando um evento (avançar um nível, clicar em um botão de ajuda, etc.) é acionado.
Arraste os blocos para o espaço de edição para vê-los no espaço de trabalho na visualização. Você pode criar grupos de blocos, desativar blocos e criar determinados blocos de sombra ao selecioná-los.
Você pode exportar esses blocos como XML (veja abaixo). Adicione-os ao espaço de trabalho com
Blockly.Xml.domToWorkspace, logo 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 exemplo de código 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.
- Toolbox: produz XML para especificar a caixa de ferramentas.
- Workspace Blocks: produz XML que pode ser carregado em um espaço de trabalho.