Variabili

Le variabili sono un concetto importante di programmazione. Blockly supporta linguaggi di tipo dinamico come Python e JavaScript e con un piccolo lavoro extra, puoi aggiungere informazioni per supportare linguaggi di tipo forte (o di tipo statico) come Java o C.

Qui puoi trovare ulteriori informazioni sulle lingue di tipo dinamico e statico.

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

Per impostazione predefinita, Blockly consente di assegnare qualsiasi tipo a una variabile e tutti i generatori forniti da Blockly sono destinati a lingue di tipo dinamico. Se invece utilizzi una lingua digitata, puoi configurare Blockly in modo che lo supporti procedendo nel seguente modo:

Blocchi di variabili non digitati

I blocchi più basilari per l'accesso e la gestione di una variabile sono i blocchi getter e setter. Analizziamo i blocchi getter e setter offerti 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);
    ...
  }
};

In questo modo vengono creati i due blocchi seguenti:

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

Blocchi variabili digitati

Puoi aggiungere getter e setter che applicano il controllo dei tipi. 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);
    ...
  }
};

Questo crea due tipi di blocchi: getter e setter. I loro menu a discesa mostrano solo variabili di tipo Panda. Gli ingressi e gli output accettano solo le connessioni di tipo Panda. defaultType del campo deve essere impostato su uno dei valori nell'array variableTypes. Se non imposti defaultType mentre fornisci un array variableTypes, verrà visualizzato un errore.

Per impostazione predefinita, non esiste un indicatore visivo per indicare all'utente quale tipo viene utilizzato. Un modo semplice per distinguere i tipi di variabili è tramite il colore.

Aggiungi variabili a Strumenti

Per rendere questo nuovo tipo di variabile utile 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.

Aggiungi i tuoi nuovi campioni e palleggiatori alla categoria.

Pulsante Crea variabile

Successivamente, l'utente ha bisogno di 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 è disporre di un pulsante "crea" per tipo (ad es. Crea variabile stringa, Crea variabile numero, Crea variabile Panda).

Se hai più di due o tre tipi di variabili, potresti finire rapidamente con troppi pulsanti. In tal caso, prendi in considerazione l'utilizzo di @blockly/plugin-typed-variable-modal per visualizzare un popup da cui gli utenti possono selezionare il tipo di variabile desiderato.

Definisci generatori

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