Variabili

Le variabili sono un concetto importante di programmazione. Blockly supporta linguaggi con tipi dinamici come Python e JavaScript e, con un po' di impegno in più, puoi aggiungere informazioni per supportare linguaggi fortemente tipizzati (o con tipi statici) come Java o C.

Qui puoi trovare altre informazioni sui linguaggi con tipi dinamici e statici.

Blockly fornisce campi di variabili, ovvero caselle a discesa dinamiche che mostrano i nomi delle variabili fornite dall'utente. Di seguito è riportato un esempio.

Un campo della variabile con un menu a discesa per scegliere una variabile, modificare il nome della variabile corrente o eliminare la variabile corrente.

Per impostazione predefinita, Blockly consente di assegnare qualsiasi tipo a una variabile e tutti i generatori forniti da Blockly sono per i linguaggi con tipi dinamici. Se invece utilizzi un linguaggio digitato, puoi configurare Blockly per supportarlo nel seguente modo:

Blocchi di variabili non tipizzate

I blocchi di base per accedere e manipolare una variabile sono i blocchi getter e setter. Esaminiamo i blocchi di getter e setter forniti da Blockly.

JSON

// Block for variable getter.
{
  "type": "variables_get",
  "message0": "%1",
  "args0": [
    {    // Beginning of the field variable dropdown
      "type": "field_variable",
      "name": "VAR",    // Static name of the field
      "variable": "%{BKY_VARIABLES_DEFAULT_NAME}"    // Given at runtime
    }    // End of the field variable dropdown
  ],
  "output": null,    // Null means the return value can be of any type
  ...
},

// Block for variable setter.
{
  "type": "variables_set",
  "message0": "%{BKY_VARIABLES_SET}",
  "args0": [
    {
      "type": "field_variable",
      "name": "VAR",
      "variable": "%{BKY_VARIABLES_DEFAULT_NAME}"
    },
    {
      "type": "input_value",    // This expects an input of any type
      "name": "VALUE"
    }
  ],
  ...
}

JavaScript

// Block for variable getter.
Blockly.Blocks['variables_get'] = {
  init: function() {
    this.appendDummyInput()
      .appendField(new Blockly.FieldVariable("VAR_NAME"), "FIELD_NAME");
    this.setOutput(true, null);
    ...
  }
};

// Block for variable setter.
Blockly.Blocks['variables_set'] = {
  init: function() {
    this.appendValueInput("NAME")
        .setCheck(null)
        .appendField("set")
        .appendField(new Blockly.FieldVariable("VAR_NAME"), "FIELD_NAME")
        .appendField("to");
    this.setOutput(true, null);
    ...
  }
};

Vengono creati i seguenti due blocchi:

Blocchi di getter e setter per la variabile `foo`.

Un dettaglio importante da notare è che impostando "output" del getter della variabile su null, il valore restituito può essere di qualsiasi tipo. Inoltre, tieni presente che l'input del settore della variabile non specifica alcun controllo. Di conseguenza, la variabile può essere impostata su qualsiasi tipo di valore.

Blocchi di variabili con tipi

Puoi aggiungere getter e setter che applicano il controllo del tipo. Ad esempio, se hai creato una variabile di tipo "Panda", le seguenti definizioni creano un getter e un setter con i tipi appropriati.

JSON

 // Block for Panda variable getter.
 {
  "type": "variables_get_panda",
  "message0": "%1",
  "args0": [
    {
      "type": "field_variable",
      "name": "VAR",
      "variable": "%{BKY_VARIABLES_DEFAULT_NAME}",
      "variableTypes": ["Panda"],    // Specifies what types to put in the dropdown
      "defaultType": "Panda"
    }
  ],
  "output": "Panda",    // Returns a value of "Panda"
  ...
},

 // Block for Panda variable setter.
{
  "type": "variables_set_panda",
  "message0": "%{BKY_VARIABLES_SET}",
  "args0": [
    {
      "type": "field_variable",
      "name": "VAR",
      "variable": "%{BKY_VARIABLES_DEFAULT_NAME}",
      "variableTypes": ["Panda"],
      "defaultType": "Panda"
    },
    {
      "type": "input_value",
      "name": "VALUE",
      "check": "Panda"    // Checks that the input value is of type "Panda"
    }
  ],
  "previousStatement": null,
  "nextStatement": null,
  ...
}

JavaScript

// Block for variable getter.
Blockly.Blocks['variables_get_panda'] = {
  init: function() {
    this.appendDummyInput()
      .appendField(new Blockly.FieldVariable(
          "VAR_NAME", ['Panda'], 'Panda'), "FIELD_NAME");
    this.setOutput(true, 'Panda');
    ...
  }
};

// Block for variable setter.
Blockly.Blocks['variables_set_panda'] = {
  init: function() {
    this.appendValueInput("NAME")
        .setCheck('Panda')
        .appendField("set")
        .appendField(new Blockly.FieldVariable(
            "VAR_NAME", null, ['Panda'], 'Panda'), "FIELD_NAME")
        .appendField("to");
        this.setPreviousStatement(true, null);
        this.setNextStatement(true, null);
    ...
  }
};

Vengono creati due tipi di blocchi, un getter e un setter. I relativi menu a discesa visualizzano solo le variabili di tipo Panda. I relativi input e output accettano solo connessioni con tipo Panda. Il campo defaultType deve essere impostato su uno tra i valori dell'array variableTypes. Se non imposti defaultType mentre fornisci un array variableTypes, verrà generato un errore.

Per impostazione predefinita, non è presente alcun indicatore visivo che indichi all'utente il tipo di annuncio utilizzato. Un modo semplice per distinguere i tipi di variabili è tramite il colore.

Aggiungere variabili alla cassetta degli attrezzi

Per rendere utile questo nuovo tipo di variabile per gli utenti, devi aggiungere un modo per creare e utilizzare le nuove variabili.

Crea una nuova categoria dinamica per le variabili, se non ne hai già una.

Una categoria aperta denominata "VARIABILI" contenente un pulsante "Crea variabile".

Aggiungi i nuovi getter e setter alla categoria.

La stessa categoria dopo la creazione delle variabili "foo" e "bar". Contiene un pulsante "Crea variabile", blocchi set-variable-to e change-variable-by e blocchi getter.

Pulsante Crea variabile

Inoltre, l'utente deve avere un modo per creare variabili. Il modo più semplice è utilizzare un pulsante "Crea variabile".

Quando crei il pulsante, effettua la chiamata di callback

Blockly.Variables.createVariableButtonHandler(button.getTargetWorkspace(), null, 'panda');

e verrà creata una variabile di tipo Panda.

Il modo più semplice per consentire agli utenti di creare variabili di più tipi è avere un pulsante "Crea" per tipo (ad es. Crea variabile stringa, Crea variabile numerica, Crea variabile Panda).

Se hai più di due o tre tipi di variabili, potresti ritrovarti rapidamente con troppi pulsanti. In questo caso, ti consigliamo di utilizzare @blockly/plugin-typed-variable-modal per visualizzare un popup in cui gli utenti possono selezionare il tipo di variabile desiderato.

Definire i generatori

Infine, dovrai definire i generatori di codice blocco per i nuovi blocchi di variabili. Puoi anche accedere direttamente all'elenco delle variabili con Blockly.Workspace.getAllVariables() per ottenere tutte le variabili di tutti i tipi o con Blockly.Workspace.getVariablesOfType() per ottenere tutte le variabili di un tipo specifico.