Che cos'è una definizione di blocco?

Una definizione di blocco è un oggetto che definisce un blocco personalizzato. Ad esempio, definisce l'aspetto del blocco (testo, campi, connessioni, colore e così via), nonché il suo comportamento (gestori eventi a livello di blocco e così via).

Ad esempio, questo blocco:

Un blocco "string_length".

può essere definito in JSON o JavaScript come segue:

JSON

Blockly.common.defineBlocksWithJsonArray([{
  "type": "string_length",
  "message0": 'length of %1',
  "args0": [
    {
      "type": "input_value",
      "name": "VALUE",
      "check": "String"
    }
  ],
  "output": "Number",
  "colour": 160,
  "tooltip": "Returns number of letters in the provided text.",
  "helpUrl": "http://www.w3schools.com/jsref/jsref_length_string.asp"
}]);

defineBlocksWithJsonArray crea una definizione di blocco da un oggetto JSON.

JavaScript

Blockly.Blocks['string_length'] = {
   init: function() {
     this.appendValueInput('VALUE')
         .setCheck('String')
         .appendField('length of');
     this.setOutput(true, 'Number');
     this.setColour(160);
     this.setTooltip('Returns number of letters in the provided text.');
     this.setHelpUrl('http://www.w3schools.com/jsref/jsref_length_string.asp');
   }
};

Quando utilizzi JavaScript, crei direttamente la definizione del blocco.

Come funzionano le definizioni dei blocchi

Una definizione di blocco è un mixin contenente proprietà con valori di funzione. Quando viene creato un nuovo blocco, queste proprietà vengono copiate nell'oggetto del blocco appena creato. Blockly chiama queste funzioni per invocare un comportamento personalizzato.

Poiché le funzioni di definizione sono incorporate nell'oggetto block:

  • La parola chiave this nelle funzioni di definizione si riferisce all'oggetto block. Ciò significa che può essere utilizzato per accedere ai metodi e alle proprietà pubblici della classe Block (o BlockSvg).

Blockly definisce un numero limitato di funzioni che puoi utilizzare per personalizzare i blocchi. Il più comune è init, che Blockly chiama per inizializzare un blocco e viene utilizzato per definire l'aspetto del blocco. Per un elenco completo, consulta le proprietà con valore funzione nelle classi Block e BlockSvg. Queste proprietà formano un'interfaccia per l'implementazione delle definizioni dei blocchi. Tutte sono facoltative.

Le definizioni dei blocchi possono avere anche funzioni personalizzate, anche se Blockly non le chiamerà direttamente. ma possono essere utilizzati per implementare altre funzioni. Ad esempio, un gestore eventi a livello di blocco (proprietà Block.onchange) potrebbe delegare eventi diversi a funzioni personalizzate diverse.

Come creare definizioni di blocco

Esistono diversi modi per creare definizioni di blocco:

  • Utilizza gli Strumenti per sviluppatori di Blockly per definire l'aspetto del blocco. Copia il codice JSON o JavaScript generato nel tuo codice e aggiungi il codice personalizzato in base alle esigenze. Per saperne di più, consulta Strumenti per sviluppatori Blockly.
  • Trova un blocco simile, copiane la definizione e modificalo in base alle esigenze. Per ulteriori informazioni, vedi Modificare le definizioni esistenti.
  • Scrivi una definizione di blocco a mano. Per ulteriori informazioni, consulta JSON e JavaScript.