Aggiungi blocchi personalizzati

Sebbene Blockly definisca una serie di blocchi standard, la maggior parte delle applicazioni deve definire e implementare almeno alcuni blocchi pertinenti al dominio.

I blocchi sono composti da tre componenti:

• Oggetto di definizione del blocco: definisce l'aspetto e il comportamento di un blocco, inclusi testo, colore, campi e connessioni.
• Riferimento agli strumenti: un riferimento al tipo di blocco nel file XML toolbox, in modo che gli utenti possano aggiungerlo all'area di lavoro.
• Funzione generatore: genera la stringa di codice per questo blocco. È sempre scritta in JavaScript, anche se la lingua di destinazione non è JavaScript.

Definizione del blocco

Blockly per il web carica Blocca tramite file di script. La directory blocks/ include diversi esempi di questo tipo per i blocchi standard. Supponendo che i blocchi non rientrino nelle categorie esistenti, crea un nuovo file JavaScript. Questo nuovo file JavaScript deve essere incluso nell'elenco dei tag <script ...> del file HTML dell'editor.

Nota: la maggior parte di un blocco può essere definito utilizzando gli Strumenti per sviluppatori di Blockly, anziché creare manualmente il codice riportato di seguito.

Una definizione di blocco tipica ha il seguente aspetto:

JSON

Blockly.Blocks['string_length'] = {
  init: function() {
    this.jsonInit({
      "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"
    });
  }
};

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

• string_length: questo è il nome del tipo di blocco. Poiché tutti i blocchi condividono lo stesso spazio dei nomi, è consigliabile utilizzare un nome composto dalla categoria (in questo caso string) seguito dalla funzione del blocco (in questo caso length).

• init: questa funzione definisce l'aspetto del blocco.

Questo definisce il seguente blocco:

I dettagli delle definizioni dei blocchi sono disponibili in Definisci blocchi.

Array JSON

È possibile definire più blocchi contemporaneamente utilizzando un array di definizioni di blocchi JSON.

JSON

Blockly.defineBlocksWithJsonArray([
  // Block for colour picker.
  {
    "type": "colour_picker",
    "message0": "%1",
    "args0": [
      {
        "type": "field_colour",
        "name": "COLOUR",
        "colour": "#ff0000"
      }
    ],
    "output": "Colour",
    "helpUrl": "%{BKY_COLOUR_PICKER_HELPURL}",
    "style": "colour_blocks",
    "tooltip": "%{BKY_COLOUR_PICKER_TOOLTIP}",
    "extensions": ["parent_tooltip_when_inline"]
  },
  // Block for random colour.
  {
    "type": "colour_random",
    "message0": "%{BKY_COLOUR_RANDOM_TITLE}",
    "output": "Colour",
    "helpUrl": "%{BKY_COLOUR_RANDOM_HELPURL}",
    "style": "colour_blocks",
    "tooltip": "%{BKY_COLOUR_RANDOM_TOOLTIP}"
  }
]);

Aggiungi riferimento alla casella degli strumenti

Una volta definito, utilizza il nome del tipo per fare riferimento al blocco alla casella degli strumenti:

<xml id="toolbox" style="display: none">
  <category name="Text">
    <block type="string_length"></block>
  </category>
  ...
</xml>

Per ulteriori dettagli, consulta la guida di Toolbox.

Aggiungi generatore di codici a blocchi

Infine, per trasformare il blocco in codice, associalo a una funzione generatore. I generatori sono specifici per la lingua di output desiderata, ma in genere i generatori standard hanno il seguente formato:

javascriptGenerator.forBlock['text_length'] = function(block, generator) {
  // String or array length.
  var argument0 = generator.valueToCode(block, 'VALUE', Order.FUNCTION_CALL) || '\'\'';
  return [argument0 + '.length', Order.MEMBER];
};

La funzione generatore prende un riferimento al blocco per l'elaborazione. Rende gli input (l'input VALUE, sopra) in stringhe di codice, quindi le concatena in un'espressione più grande.

→ Ulteriori informazioni sui generatori di blocchi di codici...