Variables

Les variables sont un concept de programmation important. Blockly est compatible avec les langages à typage dynamique tels que Python et JavaScript. Avec un peu d'effort, vous pouvez ajouter des informations pour prendre en charge les langages à typage fort (ou langages à typage statique) tels que Java ou C.

Cliquez ici pour en savoir plus sur les langages typés dynamiques et statiques.

Blockly fournit des champs de variable qui sont des listes déroulantes dynamiques qui affichent les noms des variables fournies par l'utilisateur. Vous trouverez ci-dessous un exemple.

Champ de variable avec une liste déroulante permettant de sélectionner une variable, de modifier le nom de la variable actuelle ou de la supprimer.

Par défaut, Blockly permet d'attribuer n'importe quel type à une variable, et tous les générateurs fournis par Blockly sont destinés aux langages à typage dynamique. Si vous utilisez plutôt un langage écrit, vous pouvez configurer Blockly pour qu'il le prenne en charge en procédant comme suit:

Blocs de variables non typés

Les blocs les plus élémentaires pour accéder à une variable et la manipuler sont les blocs "getter" et "setter". Voyons les blocs "getter" et "setter" fournis par 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);
    ...
  }
};

Les deux blocs suivants sont ainsi créés:

Blocs "getter" et "setter" pour la variable "foo".

Un détail important à noter est qu'en définissant la valeur "output" du getter de variable sur "null", la valeur de retour peut être de n'importe quel type. Notez également que l'entrée du setter de variable ne spécifie aucune vérification. Par conséquent, la variable peut être définie sur n'importe quel type de valeur.

Blocs de variables typées

Vous pouvez ajouter des getters et des setters qui appliquent la vérification de type. Par exemple, si vous avez créé une variable de type "Panda", les définitions suivantes créent un getter et un setter avec les types appropriés.

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

Cela crée deux types de blocs, un getter et un setter. Les menus déroulants n'affichent que des variables de type Panda. Leurs entrées et sorties n'acceptent que des connexions de type Panda. Le defaultType du champ doit être défini sur l'une des valeurs du tableau variableTypes. Si vous ne définissez pas defaultType lorsque vous fournissez un tableau variableTypes, une erreur sera générée.

Par défaut, aucun indicateur visuel n'indique à l'utilisateur quel type est utilisé. Un moyen simple de différencier les types de variables est de les couleurs.

Ajouter des variables à la boîte à outils

Pour que ce nouveau type de variable soit utile à vos utilisateurs, vous devez ajouter un moyen de créer et d'utiliser les nouvelles variables.

Créez une catégorie dynamique pour les variables si vous n'en avez pas déjà une.

Catégorie ouverte intitulée "Variables" contenant un bouton "Créer une variable".

Ajoutez vos nouveaux getters et setters à la catégorie.

Même catégorie après la création des variables "foo" et "bar". Il contient un bouton "Créer une variable", des blocs set-variable-to et change-variable-by, ainsi que des blocs getter.

Bouton "Créer une variable"

Ensuite, votre utilisateur doit pouvoir créer des variables. Le moyen le plus simple consiste à utiliser un bouton "Créer une variable".

Lorsque vous créez le bouton, effectuez l'appel du rappel.

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

Une variable de type Panda sera créée.

Le moyen le plus simple de permettre aux utilisateurs de créer des variables de plusieurs types consiste à avoir un bouton "Créer" par type (par exemple, "Créer une variable de chaîne", "Créer une variable de nombre", "Créer une variable Panda").

Si vous disposez de plus de deux ou trois types de variables, vous risquez rapidement d'avoir trop de boutons. Dans ce cas, envisagez d'utiliser @blockly/plugin-typed-variable-modal pour afficher une fenêtre pop-up à partir de laquelle les utilisateurs peuvent sélectionner le type de variable souhaité.

Définir des générateurs

Enfin, vous devez définir des générateurs de code de bloc pour vos nouveaux blocs de variables. Vous pouvez également accéder directement à la liste des variables avec Blockly.Workspace.getAllVariables() pour obtenir toutes les variables de tous les types ou Blockly.Workspace.getVariablesOfType() pour obtenir toutes les variables d'un type spécifique.