Variabili

Le variabili sono un importante concetto di programmazione. Blockly supporta dinamicamente linguaggi digitati come Python e JavaScript e, con un po' di lavoro in più, può aggiungere informazioni per supportare lingue con digitazione forte (o testo statico come Java o C.

Qui puoi scoprire di più informazioni sulle lingue diamiche e sulle lingue tipiche statiche.

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

Per impostazione predefinita, Blockly consente di assegnare qualsiasi tipo a una variabile e a tutti I generatori forniti da Blockly sono per lingue digitate dinamicamente. Se utilizzando una lingua digitata, puoi configurare Blockly in modo che la supporti le seguenti:

• Specifica un tipo di variabile e i suoi blocchi, tra cui getter e setter.
• Configurare gli strumenti per utilizzare il tipo di variabile e i blocchi.
• Definire i generatori delle variabili e dei loro blocchi.

Blocchi di variabili non digitate

I blocchi più basilari per l'accesso e la manipolazione di una variabile sono il getter e setter. Vediamo in dettaglio i blocchi getter e setter utilizzati da Blockly. fornisce.

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 la variabile getter "output" a null, il valore restituito può essere di qualsiasi tipo. Inoltre, nota che la variabile l'input del setter non specifica alcun controllo. Di conseguenza, la variabile può essere impostata a qualsiasi tipo di valore.

Blocchi di variabili digitate

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 getter e 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: un getter e un setter. Solo i relativi menu a discesa visualizzare le variabili di tipo Panda. I loro input e output accettano solo di tipo Panda. Il defaultType del campo deve essere impostato su uno dei valori nell'array variableTypes. Nessuna impostazione di defaultType durante se fornisci un array variableTypes, verrà generato un errore.

Per impostazione predefinita, non viene fornito alcun indicatore visivo che indichi all'utente il tipo di servizio in uso. Un modo semplice per distinguere i tipi di variabili è in base al colore.

Nota: la chiave variables è facoltativa in un campo field_variable. Se non è definito solo le variabili del tipo di stringa vuota "" . Per mostrare tutte le variabili di qualsiasi tipo, usa "variableTypes": null.

Aggiungi variabili agli Strumenti

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

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

Aggiungi i nuovi getter e setter alla categoria.

Crea pulsante variabile

Successivamente, l'utente deve trovare un modo per creare variabili. Il modo più semplice è "Crea variabile" .

Quando crei il pulsante, effettua la chiamata di callback

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

e verrà creata una variabile digitata Panda.

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

Se hai più di due o tre tipi di variabili, puoi ottenere rapidamente ci sono troppi pulsanti. In tal caso, valuta la possibilità di utilizzare @blockly/plugin-typed-variable-modal per visualizzare un popup da cui gli utenti possono selezionare il tipo di variabile desiderato.

Definizione dei generatori

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