Definisci blocchi

Le definizioni dei blocchi descrivono l'aspetto e il comportamento di un blocco, inclusi il testo, il colore, la forma e gli altri blocchi a cui può collegarsi.

Confronto tra formato JSON e API JavaScript

Blockly può definire i blocchi in due modi: oggetti JSON e funzioni JavaScript. Il formato JSON è progettato per semplificare la localizzazione di sviluppo durante lo sviluppo per lingue con un diverso ordine delle parole. Il formato JSON è quello preferito il metodo di definizione dei blocchi.

Tuttavia, il formato JSON non è in grado di definire direttamente funzionalità avanzate come come mutatori o convalidatori. Questi devono essere scritti in JavaScript, di solito come estensioni.

Anche le app che utilizzano l'implementazione JavaScript originale di Blockly possono scrivere blocca direttamente le definizioni direttamente alle chiamate di funzione API Blockly di livello inferiore, nei vari esempi JavaScript riportati di seguito.

JSON

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

La funzione init crea la forma del blocco. Nel contesto di questa funzione, la parola chiave this è il blocco effettivamente creato.

Entrambi gli esempi caricano lo stesso valore "string_length" bloccare.

Sul web, il formato JSON viene caricato utilizzando la funzione initJson. Questo consente anche di combinare i due formati nelle pagine web Blockly. È è preferibile definire il blocco con JSON, se possibile, e usare JavaScript solo per parti delle definizioni di blocco non supportate da JSON.

Di seguito è riportato un esempio di blocco prevalentemente definito mediante JSON. ma viene estesa utilizzando l'API JavaScript per presentare una descrizione comando dinamica.

JavaScript

var mathChangeJson = {
  "message0": "change %1 by %2",
  "args0": [
    {"type": "field_variable", "name": "VAR", "variable": "item", "variableTypes": [""]},
    {"type": "input_value", "name": "DELTA", "check": "Number"}
  ],
  "previousStatement": null,
  "nextStatement": null,
  "colour": 230
};

Blockly.Blocks['math_change'] = {
  init: function() {
    this.jsonInit(mathChangeJson);
    // Assign 'this' to a variable for use in the tooltip closure below.
    var thisBlock = this;
    this.setTooltip(function() {
      return 'Add a number to variable "%1".'.replace('%1',
          thisBlock.getFieldValue('VAR'));
    });
  }
};

Colore blocco

Il colore principale di un blocco è definito dalla proprietà colour JSON, nella funzione block.setColour(..), o utilizzando temi e definendo un blocco lo stile del testo.

JSON

{
  // ...,
  "colour": 160,
}

JavaScript

init: function() {
  // ...
  this.setColour(160);
}

Consulta la guida ai colori dei blocchi per ulteriori dettagli.

Connessioni istruzione

Gli utenti possono creare sequenze di blocchi utilizzando nextStatement e Connettori previousStatement. Nel layout standard di Blockly, queste connessioni si trovano nella parte superiore e inferiore, con i blocchi impilati verticalmente.

Un blocco con un connettore precedente non può avere un connettore di output e viceversa. Il termine statement block si riferisce a un blocco senza output di valore. Un blocco di istruzioni di solito sia una connessione precedente che una successiva.

Le connessioni nextStatement e previousStatement possono essere digitata, ma questa funzione non è utilizzata dai blocchi standard.

Connessione successiva

Crea un punto nella parte inferiore del blocco, in modo che altre istruzioni possano essere impilati sotto. Un blocco con una connessione successiva, ma nessuna connessione precedente di solito rappresenta un evento e può essere configurato per il rendering un cappello.

JSON

Non digitato:

{
  ...,
  "nextStatement": null,
}

Digitazione digitata (raro):

{
  "nextStatement": "Action",
  ...
}

JavaScript

Non digitato:

this.setNextStatement(true);  // false implies no next connector, the default

Tipo di testo (raro):

this.setNextStatement(true, 'Action');

Connessione precedente

Crea un incavo nella parte superiore del blocco in modo che possa essere collegato in pila di dichiarazioni.

I blocchi con una connessione precedente non possono avere una connessione di output.

JSON

Non digitato:

{
  ...,
  "previousStatement": null,
}

Digitazione digitata (raro):

{
  "previousStatement": "Action",
  ...
}

JavaScript

Non digitato:

this.setPreviousStatement(true);  // false implies no previous connector, the default

Tipo di testo (raro):

this.setPreviousStatement(true, 'Action');

Blocca output

Un blocco può avere un singolo output, rappresentato come un connettore maschio per puzzle sulla bordo principale. Le uscite si collegano agli ingressi dei valori. I blocchi con un output sono di solito chiamati blocchi di valori.

JSON

Non digitato:

{
  // ...,
  "output": null,
}

Digitato:

{
  // ...,
  "output": "Number",
}

JavaScript

Non digitato:

init: function() {
  // ...
  this.setOutput(true);
}

Digitato:

init: function() {
  // ...
  this.setOutput(true, 'Number');
}

I blocchi con un connettore di output non possono avere anche un notch di istruzione precedente.

Blocca ingressi

Un blocco ha uno o più input, dove ogni input ha una sequenza di fields e può terminare con una connessione. Esistono diversi di input integrati.

  • Input del valore: si connette a una connessione di output di un blocco di valori. Un blocco math_arithmetic (addizione, sottrazione) è un un esempio di blocco con due input di valori.
  • Input istruzione: si connette a una connessione precedente di un blocco di istruzioni. La sezione nidificata di un ciclo Mentre è un esempio di input di istruzioni.
  • Input fittizio: non ha una connessione a blocchi. Funziona come una nuova riga quando il blocco è configurato per usare ingressi di valori esterni.
  • Input finale: non ha una connessione a blocchi e agisce sempre come nuova riga.

Puoi anche creare un input personalizzato per supportare il rendering.

Il formato JSON e l'API JavaScript utilizzano modelli leggermente diversi per descrivere i relativi input.

Input e campi in JSON

I blocchi definiti da JSON sono strutturati come una sequenza di interpolazioni stringhe di messaggi ( message0, message1, ...), in cui ogni token di interpolazione (%1, %2, ...) è un campo o un'estremità di input (quindi dove il connettore di input all'interno del messaggio) nell'array argsN JSON corrispondente. Questo formato è con lo scopo di semplificare l'internazionalizzazione.

JSON

{
  "message0": "set %1 to %2",
  "args0": [
    {
      "type": "field_variable",
      "name": "VAR",
      "variable": "item",
      "variableTypes": [""]
    },
    {
      "type": "input_value",
      "name": "VALUE"
    }
  ]
}

I token di interpolazione devono corrispondere completamente all'array args0: nessun duplicato, nessuna omissione. I token possono essere presenti in qualsiasi ordine, il che consente diversi lingue per modificare il layout del blocco.

Il testo ai lati di un token di interpolazione è tagliato con uno spazio vuoto. Il testo che utilizza il carattere % (ad es. quando si fa riferimento a una percentuale) deve essere %% per non essere interpretato come token di interpolazione.

L'ordine degli argomenti e i tipi di argomenti definiscono la forma bloccare. La modifica di una di queste stringhe può cambiare completamente il layout del blocco. Ciò è particolarmente importante nelle lingue che hanno un ordine delle parole diverso rispetto all'inglese. Considera un linguaggio ipotetico in cui "set %1 to %2" (come utilizzato nell'esempio precedente) deve essere invertito per indicare "put %2 in %1". Modifica questa stringa (lasciando il resto del file JSON untouched) determina il seguente blocco:

Blockly ha modificato automaticamente l'ordine dei campi, creato un input fittizio e passare dagli ingressi esterni a quelli interni.

Blockly sostituisce inoltre automaticamente qualsiasi carattere di nuova riga (\n) nel messaggio con un input di riga finale.

JSON

{
  "message0": "set %1\nto %2",
  "args0": [
    {
      "type": "field_variable",
      "name": "VAR",
      "variable": "item",
      "variableTypes": [""]
    },
    {
      "type": "input_value",
      "name": "VALUE"
    }
  ]
}

Arg

Ogni stringa di messaggio è abbinata a un array args dello stesso numero. Per ad esempio, message0 corrisponde a args0. I token di interpolazione (%1, %2, ...) fanno riferimento agli elementi dell'array args. Ogni oggetto ha un Stringa type. Gli altri parametri variano in base al tipo:

Puoi anche definire campi personalizzati e input personalizzati e passarli come argomenti.

Ogni oggetto può anche avere un campo alt. Nel caso in cui Blockly non riconoscere type dell'oggetto, al suo posto verrà utilizzato l'oggetto alt. Per Ad esempio, se un nuovo campo denominato field_time viene aggiunto a Blockly, viene bloccato questo campo potrebbe utilizzare alt per definire un field_input di riserva per le versioni precedenti di Blockly:

JSON

{
  "message0": "sound alarm at %1",
  "args0": [
    {
      "type": "field_time",
      "name": "TEMPO",
      "hour": 9,
      "minutes": 0,
      "alt":
        {
          "type": "field_input",
          "name": "TEMPOTEXT",
          "text": "9:00"
        }
    }
  ]
}

Un oggetto alt può avere il proprio oggetto alt, consentendo il collegamento. Fondamentalmente, se Blockly non riesce a creare un oggetto nell'array args0 (dopo tentativo di eseguire qualsiasi oggetto alt), l'oggetto viene semplicemente ignorato.

Verrà aggiunto automaticamente un input fittizio alla fine del blocco se La stringa message termina con testo o campi non contenuti in un input. Pertanto, se l'ultimo input in un blocco è un input fittizio, può essere omesso l'array args e non necessita dell'interpolazione in message. La l'aggiunta automatica di un input fittizio di tailing consente ai traduttori di modificare message senza dover modificare il resto del file JSON. Vedi l'esempio di "set %1 to %2" (nessun input fittizio) e "put %2 in %1" (input fittizio aggiunto) in precedenza su questa pagina.

implicitAlign0

In rari casi, l'input fittizio finale creato automaticamente deve essere allineato al "RIGHT" o "CENTRE". Il valore predefinito se non specificato è "LEFT".

Nell'esempio seguente, message0 è "send email to %1 subject %2 secure %3" e Blockly aggiunge automaticamente un input fittizio per la terza riga. Impostazione Da implicitAlign0 a "RIGHT" forza l'allineamento di questa riga a destra. Questo l'allineamento si applica a tutti gli input non definiti esplicitamente nel file JSON la definizione dei blocchi, inclusi gli input della riga finale che sostituiscono i caratteri di nuova riga ('\n') nel messaggio. È presente anche la proprietà ritirata lastDummyAlign0 che ha lo stesso comportamento di implicitAlign0.

Quando si progettano i blocchi per RTL (arabo ed ebraico), i valori sinistro e destro sono invertiti. In questo modo "RIGHT" allineerà i campi a sinistra.

message1, args1 e implicitAlign1

Alcuni blocchi sono naturalmente suddivisi in due o più parti separate. Considera questo blocco di ripetizione che ha due righe:

Se questo blocco è stato descritto con un solo messaggio, la proprietà message0 sarà "repeat %1 times %2 do %3". Questa stringa è strana per un traduttore, è difficile spiegare cosa significa la sostituzione %2. Il dummy %2 l'input potrebbe anche non essere desiderato in alcune lingue. Potrebbero esserci diverse blocchi che vogliono condividere il testo della seconda riga. Un approccio migliore prevede che JSON utilizzi più di un messaggio e delle proprietà degli argomenti:

JSON

{
  "type": "controls_repeat_ext",
  "message0": "repeat %1 times",
  "args0": [
    {"type": "input_value", "name": "TIMES", "check": "Number"}
  ],
  "message1": "do %1",
  "args1": [
    {"type": "input_statement", "name": "DO"}
  ],
  "previousStatement": null,
  "nextStatement": null,
  "colour": 120
}

È possibile definire un numero qualsiasi di proprietà message, args e implicitAlign in formato JSON, partendo da 0 e con incrementi in sequenza. Tieni presente che Creazione di blocchi non è in grado di suddividere i messaggi in più parti, ma farlo manualmente è semplice.

Input e campi in JavaScript

L'API JavaScript include un metodo append per ogni tipo di input:

JavaScript

this.appendEndRowInput()
    .appendField('for each')
    .appendField('item')
    .appendField(new Blockly.FieldVariable());
this.appendValueInput('LIST')
    .setCheck('Array')
    .setAlign(Blockly.inputs.Align.RIGHT)
    .appendField('in list');
this.appendStatementInput('DO')
    .appendField('do');
this.appendDummyInput()
    .appendField('end');

Ogni metodo di aggiunta può prendere una stringa identificatore, utilizzata dai generatori di codice. Fittizio mentre gli input della riga finale raramente hanno bisogno di fare riferimento e in genere l'identificatore viene lasciato non impostato.

L'API JavaScript include anche un metodo appendInput generico per l'aggiunta input personalizzati. Tieni presente che, in questo caso, l'identificatore deve passare direttamente al costruttore dell'input personalizzato.

JavaScript

this.appendInput(new MyCustomInput('INPUT_NAME'))
    .appendField('an example label')

Tutti i metodi appendInput (generici e non generici) restituiscono il valore in modo che possano essere ulteriormente configurati utilizzando il concatenamento dei metodi. Là sono tre metodi integrati usati per configurare gli input.

setCheck

JavaScript

input.setCheck('Number');

Questa funzione facoltativa viene utilizzata per il controllo del tipo di ingresso collegato. Se fornito nullo, quello predefinito, questo input può essere collegato a qualsiasi blocco. Per informazioni dettagliate, consulta la sezione Controlli del tipo.

setAlign

JavaScript

input.setAlign(Blockly.inputs.Align.RIGHT);

Questa funzione facoltativa viene utilizzata per allineare i campi (vedi di seguito). Esistono tre tipi di valori autodescrittivi che possono essere passati come argomento a questa funzione: Blockly.inputs.Align.LEFT, Blockly.inputs.Align.RIGHT e Blockly.inputs.Align.CENTER.

Quando si progettano i blocchi per RTL (arabo ed ebraico), i valori sinistro e destro sono invertiti. In questo modo Blockly.inputs.Align.RIGHT allineerà i campi a sinistra.

appendField

Dopo aver creato un input e averlo aggiunto a un blocco con appendInput, può aggiungere un numero qualsiasi di campi all'input. Questi campi vengono spesso utilizzate come etichette per descrivere lo scopo di ciascun input.

JavaScript

input.appendField('hello');

L'elemento più semplice del campo è il testo. La convenzione di Blockly prevede di utilizzare tutti testo minuscolo, ad eccezione dei nomi propri (ad es. Google, SQL).

Una riga di input può contenere un numero illimitato di elementi di campo. Più elementi appendField possono essere concatenate per aggiungere in modo efficiente più campi alla stessa riga di input.

JavaScript

input.appendField('hello')
     .appendField(new Blockly.FieldLabel('Neil', 'person'));

La chiamata appendField('hello') è in realtà una scorciatoia per l'utilizzo di un contenuto esplicito Costruttore FieldLabel: appendField(new Blockly.FieldLabel('hello')). L'unica volta che si vuole utilizzare il costruttore è quando si specifica nome della classe in modo che al testo possa essere applicato lo stile di una regola CSS.

In linea ed esterno

Gli input di blocco possono essere visualizzati come esterni o interni.

La definizione del blocco può specificare un valore booleano facoltativo che controlla se gli input siano in linea o meno. Se false, gli input di valori saranno esterni (ad esempio il blocco a sinistra). Se true, gli input di valori verranno incorporati (ad esempio blocco a destra in alto).

JSON

{
  // ...,
  "inputsInline": true
}

JavaScript

init: function() {
  // ...
  this.setInputsInline(true);
}

Se non viene definita, Blockly utilizzerà alcune euristiche per indovinare quale modalità sia migliori. supponendo che Blockly faccia la scelta giusta e che lasci questo campo non definito è preferibile perché le traduzioni in lingue diverse possono avere diverse modalità. Guarda l'esempio JSON di "set %1 to %2" (input esterni) e "put %2 in %1" (input incorporati) in precedenza in questa pagina.

Utilizza gli input in linea quando è probabile che un blocco abbia input piccoli come numeri. L'utente può attivare/disattivare questa opzione tramite il menu contestuale se collapse è abilitata (il valore predefinito è true se la casella degli strumenti contiene categorie).

Campi

I campi definiscono la maggior parte degli elementi UI all'interno di un blocco. Questi includono etichette di stringa, immagini e input per dati literali come stringhe e numeri. L'esempio più semplice è il blocco math_number, che utilizza un field_input per consentire all'utente di digitare un numero.

I campi vengono aggiunti al blocco utilizzando appendField.

Blockly fornisce una serie di campi integrati, tra cui input di testo, selettori colori e immagini. Puoi anche creare campi personalizzati.

→ Ulteriori informazioni sui campi integrati.

→ Scopri di più sulla creazione di campi personalizzati.

Icone

Le icone definiscono gli elementi UI su un blocco che mostra un "meta" informazioni sui bloccare.

Le icone vengono aggiunte al blocco utilizzando addIcon.

Blockly fornisce una serie di icone integrate, incluse le icone dei commenti e icone di avviso. Puoi anche creare icone personalizzate.

→ Scopri di più sulla creazione di icone personalizzate.

Descrizioni comando

Le descrizioni comando offrono una guida immediata quando l'utente passa il mouse sopra il blocco. Se il testo è lungo, andrà a capo automaticamente.

JSON

{
  // ...,
  "tooltip": "Tooltip text."
}

JavaScript

init: function() {
  this.setTooltip("Tooltip text.");
}

Nell'API JavaScript, le descrizioni comando possono anche essere definite come funzione anziché come una stringa statica. Ciò consente un aiuto dinamico. Consulta math_arithmetic per di una descrizione comando che cambia in base all'opzione del menu a discesa selezionata scelto.

JavaScript

Blockly.Blocks['math_arithmetic'] = {
  init: function() {
    // ...

    // Assign 'this' to a variable for use in the tooltip closure below.
    var thisBlock = this;
    this.setTooltip(function() {
      var mode = thisBlock.getFieldValue('OP');
      var TOOLTIPS = {
        'ADD': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_ADD,
        'MINUS': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_MINUS,
        'MULTIPLY': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_MULTIPLY,
        'DIVIDE': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_DIVIDE,
        'POWER': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_POWER
      };
      return TOOLTIPS[mode];
    });
  }
};

Utilizzando l'API JavaScript, i blocchi possono specificare una funzione, invece di una che restituisce una stringa della descrizione comando. Ciò consente le descrizioni comando dinamiche. Vedi math_arithmetic per un esempio.

Personalizzazione

Puoi anche personalizzare l'aspetto delle descrizioni comando fornendo un rendering personalizzato personalizzata. Crea una funzione che accetta due parametri:

  • Innanzitutto, un elemento <div> in cui eseguirai il rendering dei contenuti
  • la seconda, l'elemento effettivo su cui viene fatto scorrere il mouse e che mostrerai la descrizione comando

Nel corpo della funzione, puoi eseguire il rendering di qualsiasi contenuto desideri nella Per ottenere la stringa della descrizione comando definita nel blocco su cui viene spostato il mouse, puoi chiama Blockly.Tooltip.getTooltipOfObject(element); dove element è secondo parametro sopra riportato.

Infine, registra questa funzione in modo che Blockly possa chiamarla al momento opportuno:

Blockly.Tooltip.setCustomTooltip(yourFnHere);

Per un esempio, vedi Demo delle descrizioni comando personalizzate.

URL della Guida

Ai blocchi può essere associata una pagina di assistenza. Questa funzionalità è disponibile utenti di Blockly per il Web facendo clic con il tasto destro del mouse sul blocco e selezionando "Guida" dal menu contestuale. Se questo valore è null, il menu sarà in grigio fuori.

JSON

{
  // ...,
  "helpUrl": "https://en.wikipedia.org/wiki/For_loop"
}

JavaScript

init: function() {
  // ...
  this.setHelpUrl('https://en.wikipedia.org/wiki/For_loop');
}

Utilizzando l'API JavaScript, i blocchi possono specificare una funzione, invece di una string, che restituisce una stringa URL, consentendo così un aiuto dinamico.

Cambia listener e strumenti di convalida

I blocchi possono avere funzioni listener di modifiche che vengono richiamate a qualsiasi modifica alla (incluse quelle non correlate al blocco). Sono utilizzati principalmente per impostare il testo di avviso del blocco o una notifica utente simile al di fuori area di lavoro.

La funzione viene aggiunta chiamando setOnChange con una funzione e può essere aggiunta durante l'init o tramite un'estensione JSON, se prevedi di utilizzarla su tutte le piattaforme.

JSON

{
  // ...,
  "extensions":["warning_on_change"],
}

Blockly.Extensions.register('warning_on_change', function() {
  // Example validation upon block change:
  this.setOnChange(function(changeEvent) {
    if (this.getInput('NUM').connection.targetBlock()) {
      this.setWarningText(null);
    } else {
      this.setWarningText('Must have an input block.');
    }
  });
});

JavaScript

Blockly.Blocks['block_type'] = {
  init: function() {
    // Example validation upon block change:
    this.setOnChange(function(changeEvent) {
      if (this.getInput('NUM').connection.targetBlock()) {
        this.setWarningText(null);
      } else {
        this.setWarningText('Must have an input block.');
      }
    });
  }
}

Il sistema chiama la funzione, passando evento di modifica. All'interno della funzione, this si riferisce all'istanza di blocco.

Poiché la funzione viene chiamata a ogni modifica, se utilizzata, gli sviluppatori devono assicurarsi il listener si avvia rapidamente. Bisogna anche diffidare delle modifiche apportate all'area di lavoro che potrebbero essere inviati a cascata o rimessi in loop al listener.

Consulta controls_flow_statements, logic_compare e procedures_ifreturn blocchi per esempi.

Tieni presente che i campi modificabili hanno i propri listener di eventi per la convalida dell'input e causando effetti collaterali.

Mutatore

I mutatori consentono ai blocchi avanzati di cambiare forma, in particolare grazie utenti che aprono una finestra di dialogo per aggiungere, rimuovere o riorganizzare i componenti. I mutatori possono essere aggiunto tramite JSON con la chiave mutator.

JSON

{
  // ...,
  "mutator":"if_else_mutator"
}

Configurazione per blocco

Le istanze di blocco hanno una serie di proprietà che ne configurano il comportamento per l'utente. Queste possono essere usate per vincolare lo spazio di lavoro a riflettere proprietà del dominio (ad es. esiste esattamente un evento "start") o è dall'impegno dell'utente (ad es. un tutorial).

Stato eliminabile

block.setDeletable(false);

Se viene impostato su false, l'utente non può eliminare il blocco. Blocco predefinito da eliminare in un'area di lavoro modificabile.

Qualsiasi blocco (anche quelli non eliminabili) può essere eliminato in modo programmatico:

block.dispose();

Stato modificabile

block.setEditable(false);

Se il criterio viene impostato su false, l'utente non può modificare i campi del blocco (ad es. menu a discesa e input di testo). Per impostazione predefinita, i blocchi vengono modificati in area di lavoro.

Stato mobile

block.setMovable(false);

Se il criterio viene impostato su false, l'utente non può spostare direttamente il blocco. Un un blocco inamovibile figlio di un altro blocco non può essere scollegato quel blocco, anche se si sposterà con il relativo elemento principale se quest'ultimo viene spostato. Blocchi il valore predefinito è spostabile in un'area di lavoro modificabile.

Qualsiasi blocco (anche quelli inamovibili) può essere spostato in modo programmatico una volta che si trova in una area di lavoro.

block.moveBy(dx, dy)

Per impostazione predefinita, la posizione iniziale di un blocco in uno spazio di lavoro è (0, 0).

Blocca dati

this.data = '16dcb3a4-bd39-11e4-8dfc-aa07a5b093db';

I dati sono una stringa facoltativa e arbitraria collegata al blocco. Quando è serializzato e la stringa di dati è serializzata. Sono inclusi i seguenti il blocco è duplicato o copiato/incollato.

Spesso viene utilizzato per associare un blocco a una risorsa esterna.

Se serializzati in formato JSON, i dati vengono archiviati come proprietà di primo livello nel blocco:

{
  "type": "my_block",
  "data": "16dcb3a4-bd39-11e4-8dfc-aa07a5b093db",
  // etc..
}

Se serializzata in XML (il vecchio sistema di serializzazione con ghiaccio), la stringa di dati è memorizzato in un tag <data></data> all'interno del blocco:

<block type="my_block">
  <data>16dcb3a4-bd39-11e4-8dfc-aa07a5b093db</data>
  <!-- etc... -->
</block>

Distruzione

I blocchi hanno un hook destroy, che viene chiamato quando vengono eliminati dal area di lavoro. Può essere usato per distruggere qualsiasi modello di dati di supporto/esterno e risorse associate al blocco che non sono più necessarie.

JSON

{
  // ...,
  "extensions":["destroy"],
}

Blockly.Extensions.registerMixin('destroy', {
  destroy: function() {
    this.myResource.dispose();
  }
});

JavaScript

Blockly.Blocks['block_type'] = {
  destroy: function() {
    this.myResource.dispose();
  }
}

Il metodo destroy viene chiamato dopo che l'elemento padre del blocco è stato eliminato, prima che tutti i relativi campi secondari o vengano eliminati.

Menu contestuali

Per impostazione predefinita, i blocchi hanno un menu contestuale basato sul clic con il tasto destro del mouse che consente agli utenti ad esempio aggiungere commenti o duplicare blocchi.

Per disattivare il menu contestuale di un singolo blocco:

block.contextMenu = false;

Puoi anche personalizzare le opzioni visualizzate nel menu. Per personalizzare il menu per per tutti i blocchi, fai riferimento documentazione relativa ai menu contestuali. Per personalizzare il menu per un singolo blocco, puoi implementare customContextMenu. Questa funzione include una serie di opzioni di menu lo modificherà, quindi potrai aggiungere e rimuovere articoli.

Ogni opzione di menu è un oggetto con tre proprietà:

  • text è il testo visualizzato.
  • enabled è un valore booleano. Quando non è attiva, l'opzione è visualizzata, ma in grigio testo.
  • callback è la funzione da chiamare quando si fa clic sull'opzione.