Panoramica dei blocchi personalizzati

Blockly è dotato di 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 richiedere blocchi per disegnare linee e cerchi, mentre un'applicazione di robotica potrebbe richiedere blocchi per muovere un braccio e manipolare una pinza.

Per definire e utilizzare un nuovo tipo di blocco, sono necessari tre elementi:

• Definizione del blocco: definisce l'aspetto di un tipo di blocco, nonché alcuni comportamenti.
• Generatore di codice per 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 cassetta degli attrezzi: un riferimento al tipo di blocco nella cassetta degli attrezzi, in modo che gli utenti possano aggiungerlo allo spazio di lavoro.

Definizione blocco

Una definizione di blocco definisce l'aspetto di un blocco, ad esempio il testo, i campi, i collegamenti e il colore. Può anche definire un comportamento specifico per blocco, come un gestore eventi specifico per 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 ulteriori informazioni sulle definizioni dei blocchi e sul loro funzionamento, consulta Che cos'è una definizione del blocco?

Generatori di codice blocco

Per trasformare un blocco in codice, sono necessarie funzioni di generatore separate per ogni linguaggio 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 generatore accetta il blocco in fase di elaborazione e un generatore di lingua. 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 ulteriori informazioni, consulta la sezione Generatori di codice bloccato.

Riferimento alla cassetta degli attrezzi

Dopo aver definito il tipo di blocco, utilizza il nome del tipo per fare riferimento a esso in una cassetta degli attrezzi:

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 ulteriori informazioni, vedi Definire una cassetta degli attrezzi popup o Definire una cassetta degli attrezzi per le categorie.