Estrutura de bloco em JavaScript

Neste documento, vamos discutir como usar JavaScript para definir as entradas e os campos (incluindo rótulos) no seu bloco. Se você não estiver familiarizado com esses termos, consulte Anatomia de um bloco antes de continuar.

Também é possível definir entradas, campos e conexões em JSON.

Anexar entradas

A API JavaScript inclui um método append para cada tipo de entrada:

JavaScript

init: function() {
  // ...
  this.appendEndRowInput()
      .appendField('for each')
      .appendField('item')
      .appendField(new Blockly.FieldVariable(), 'VAR');
  this.appendValueInput('LIST')
      .setCheck('Array')
      .setAlign(Blockly.inputs.Align.RIGHT)
      .appendField('in list');
  this.appendStatementInput('DO')
      .appendField('do');
  this.appendDummyInput()
      .appendField('end');
}

Cada método appendInput pode receber uma string de identificador, que é usada por geradores de código para recuperar o código do bloco conectado à entrada. Os geradores de código raramente fazem referência a entradas de marcador de posição e de fim de linha. Portanto, geralmente não há motivo para atribuir um identificador a elas.

A API JavaScript também inclui um método appendInput genérico para anexar entradas personalizadas. Nesse caso, o identificador precisa ser transmitido diretamente ao construtor da entrada personalizada.

JavaScript

init: function() {
  // ...
  this.appendInput(new MyCustomInput('INPUT_NAME'))
      .appendField('an example label')
}

Todos os métodos appendInput (genéricos e não genéricos) retornam o objeto de entrada para que possam ser configurados ainda mais usando o encadeamento de métodos. Há três métodos integrados usados para configurar entradas.

Anexar campos

Depois que uma entrada é criada e anexada a um bloco com appendInput, é possível anexar qualquer número de campos à entrada. Esses campos são usados com frequência como rótulos para descrever a finalidade de cada entrada.

JavaScript

init: function() {
  // ...
  this.appendDummyInput()
      .appendField('hello');
}

O campo mais simples é um rótulo. A convenção do Blockly é usar todo o texto em letras minúsculas, exceto nomes próprios (por exemplo, Google, SQL).

Uma linha de entrada pode conter qualquer número de campos. Várias chamadas appendField podem ser encadeadas para adicionar vários campos à mesma linha de entrada de maneira eficiente.

JavaScript

init: function() {
  // ...
  this.appendDummyInput()
      .appendField('hello')
      .appendField(new Blockly.FieldLabel('Neil', 'person'));
}

A chamada appendField('hello') é, na verdade, um atalho para usar um construtor FieldLabel explícito: appendField(new Blockly.FieldLabel('hello')). O único momento em que se deseja usar o construtor é ao especificar um nome de classe para que o rótulo possa ser estilizado usando uma regra CSS.

Verificações de conexão

JavaScript

init: function() {
  // ...
  this.appendValueInput('NUM')
      .setCheck('Number');
}

O método setCheck é usado para verificar o tipo de conexões. Se for fornecido um argumento nulo, o padrão, essa entrada poderá ser conectada a qualquer bloco. Consulte Verificações de conexão para mais detalhes.

Alinhar campos

JavaScript

init: function() {
  // ...
  this.appendValueInput('LIST')
      .appendField('in list')
      .setAlign(Blockly.inputs.Align.RIGHT);
}

O método setAlign é usado para alinhar campos em uma entrada. Há três valores autodescritivos que podem ser transmitidos como um argumento para essa função: Blockly.inputs.Align.LEFT, Blockly.inputs.Align.RIGHT e Blockly.inputs.Align.CENTER.

Quando um bloco é renderizado no modo da direita para a esquerda (por exemplo, árabe e hebraico), esquerda e direita são invertidas. Assim, Blockly.inputs.Align.RIGHT alinha os campos à esquerda.