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 alla cassetta degli attrezzi: un riferimento al tipo di blocco nel file XML della cassetta degli attrezzi, in modo che gli utenti possano aggiungerlo allo spazio di lavoro.
  • Funzione generatore: genera la stringa di codice per questo blocco. È sempre scritte in JavaScript, anche se la lingua di destinazione non è JavaScript.

Definizione blocco

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

Una tipica definizione di blocco 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, è buona norma utilizzare un nome costituito dalla tua categoria (in questo caso string) seguito dalla funzione del blocco (in questo caso length).

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

In questo modo viene definito il seguente blocco:

Un blocco &quot;string_length&quot;.

I dettagli delle definizioni dei blocchi sono disponibili in Definire i 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}"
  }
]);

Aggiungere un riferimento alla cassetta degli attrezzi

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 della cassetta degli attrezzi.

Aggiungi generatore di codice blocco

Infine, per trasformare il blocco in codice, associalo a un generatore personalizzata. I generatori sono specifici del linguaggio di output desiderato, solitamente i generatori standard assumono 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. it esegue il rendering degli input (l'input VALUE, sopra) in stringhe di codice, quindi le concatena in un'espressione più grande.

→ Scopri di più sui generatori di codice blocco…