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 de travail supplémentaire, vous pouvez ajouter des informations pour prendre en charge les langages à typage fort (ou langages à typage statique) tels que Java ou C.

Pour en savoir plus sur les langages à typage dynamique et statique, consultez Introduction to Data Types: Static, Dynamic, Strong & Weak (Introduction aux types de données : statique, dynamique, fort et faible).

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

Un champ de variable avec un menu déroulant 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 typé, 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. Examinons 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);
    ...
  }
};

Cela crée les deux blocs suivants :

Blocs Getter et Setter pour la variable `foo`.

Il est important de noter qu'en définissant la "sortie" 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 du 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 Panda 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 Panda 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. Leurs menus déroulants n'affichent que les variables de type "Panda". Leurs entrées et sorties n'acceptent que les 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 le type de connexion utilisé. Une façon simple de différencier les types de variables est d'utiliser des 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.

Une catégorie ouverte nommé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 "Définir la variable sur" et "Modifier la variable de", ainsi que des blocs getter.

Bouton "Créer une variable"

Ensuite, votre utilisateur a besoin d'un moyen de créer des variables. Le moyen le plus simple consiste à utiliser le bouton "Créer une variable".

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

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

Une variable typée "Panda" sera alors 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 numérique", "Créer une variable Panda").

Si vous avez plus de deux ou trois types de variables, vous pouvez rapidement vous retrouver avec trop de boutons. Dans ce cas, envisagez d'utiliser @blockly/plugin-typed-variable-modal pour afficher un pop-up à partir duquel les utilisateurs peuvent sélectionner le type de variable souhaité.

Définir les générateurs

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