Panoramica dei blocchi personalizzati

Blockly include un numero elevato di blocchi predefiniti, dalle funzioni matematiche alle strutture di loop. Tuttavia, la maggior parte delle applicazioni deve definire e implementare blocchi personalizzati per il proprio dominio. Ad esempio, un'applicazione di disegno potrebbe aver bisogno di blocchi per disegnare linee e cerchi e un'applicazione di robotica potrebbe aver bisogno di blocchi per spostare un braccio e manipolare un artiglio.

Per definire e utilizzare un nuovo tipo di blocco, sono necessarie tre cose:

• Definizione del blocco: definisce l'aspetto di un tipo di blocco, nonché determinati comportamenti.
• Generatore di codice a blocchi: genera la stringa di codice per i blocchi di questo tipo. È sempre scritto in JavaScript, anche se la lingua di destinazione non è JavaScript.
• Riferimento alla toolbox: un riferimento al tipo di blocco nella toolbox, in modo che gli utenti possano aggiungerlo all'area di lavoro.

Definizione del blocco

Una definizione del blocco definisce l'aspetto di un blocco, ad esempio testo, campi, connessioni e colore. Può anche definire un comportamento specifico del blocco, ad esempio un gestore di eventi specifico del blocco. Ad esempio, questo blocco:

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"
}]);

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

Per saperne di più sulle definizioni dei blocchi e sul loro funzionamento, consulta Che cos'è una definizione di blocco?.

Generatori di codice a blocchi

Per trasformare un blocco in codice, devi utilizzare funzioni di generazione separate per ogni lingua che vuoi generare. Ad esempio, ecco un generatore che genera JavaScript:

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

La funzione di generazione accetta il blocco in fase di elaborazione e un generatore di lingue. Genera codice per tutti i blocchi collegati agli input (ad esempio l'input VALUE nell'esempio) e a tutti i campi, quindi concatena le stringhe risultanti in un'espressione più grande.

Per saperne di più, consulta la pagina Generatori di codice a blocchi.

Riferimento alla toolbox

Dopo aver definito il tipo di blocco, utilizza il nome del tipo per farvi riferimento in una toolbox:

JSON

var toolbox = {
     "kind": "categoryToolbox",
     "name": "Text"
     "contents": [
       {
         "kind": "block",
         "type": "string_length"
       },
     ]
   };

XML

<xml id="toolbox" style="display: none"> WHY IS THERE DISPLAY: NONE HERE?
   <category name="Text">
     <block type="string_length"></block>
   </category>
   ...
</xml>

Per saperne di più, consulta Definire una toolbox a comparsa o Definire una toolbox di categoria.