Struttura dei blocchi in JavaScript

In questo documento, vedremo come utilizzare JavaScript per definire gli input e i campi (incluse le etichette) nel blocco. Se non hai familiarità con questi termini, consulta Anatomia di un blocco prima di procedere.

Puoi anche definire input, campi e connessioni in JSON.

Aggiungi input

L'API JavaScript include un metodo append per ogni tipo di input:

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');
}

Ogni metodo appendInput può accettare una stringa identificatore, che viene utilizzata dai generatori di codice per recuperare il codice del blocco collegato all'input. I generatori di codici fanno raramente riferimento a input fittizi e di fine riga, quindi in genere non c'è motivo di assegnare loro un identificatore.

L'API JavaScript include anche un metodo generico appendInput per aggiungere input personalizzati. Tieni presente che in questo caso l'identificatore deve essere passato direttamente al costruttore dell'input personalizzato.

JavaScript

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

Tutti i metodi appendInput (generici e non generici) restituiscono l'oggetto di input in modo che possano essere ulteriormente configurati utilizzando l'incatenamento dei metodi. Esistono tre metodi integrati utilizzati per configurare gli input.

Aggiungi campi

Una volta creato e aggiunto a un blocco con appendInput, è possibile aggiungere facoltativamente un numero qualsiasi di campi all'input. Questi campi vengono spesso utilizzati come etichette per descrivere a cosa serve ogni input.

JavaScript

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

Il campo più semplice è un'etichetta. La convenzione di Blockly prevede l'utilizzo di testo in minuscolo, ad eccezione dei nomi propri (ad es. Google, SQL).

Una riga di input può contenere un numero qualsiasi di campi. È possibile concatenare più chiamate appendField per aggiungere in modo efficiente diversi campi alla stessa riga di input.

JavaScript

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

La chiamata appendField('hello') è in realtà una scorciatoia per l'utilizzo di un costruttore FieldLabel esplicito: appendField(new Blockly.FieldLabel('hello')). L'unico caso in cui si desidera utilizzare il costruttore è quando si specifica un nome di classe in modo che l'etichetta possa essere stilizzata utilizzando una regola CSS.

Controlli della connessione

JavaScript

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

Il metodo setCheck viene utilizzato per controllare il tipo di connessioni. Se viene fornito un argomento nullo, il valore predefinito, questo input può essere collegato a qualsiasi blocco. Per ulteriori dettagli, consulta Controlli della connessione.

Allinea campi

JavaScript

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

Il metodo setAlign viene utilizzato per allineare i campi all'interno di un input. Esistono tre valori autodescrittivi che possono essere passati come argomento a questa funzione: Blockly.inputs.Align.LEFT, Blockly.inputs.Align.RIGHT e Blockly.inputs.Align.CENTER.

Quando un blocco viene visualizzato in modalità da destra a sinistra (ad es. arabo ed ebraico), sinistra e destra vengono invertite. Pertanto, Blockly.inputs.Align.RIGHT allineerebbe i campi a sinistra.