Variables

Les variables sont un concept de programmation important. Compatibilité avec Blockly de manière dynamique à l'aide de langages de programmation tels que Python et JavaScript. Avec un peu plus de travail, Vous pouvez ajouter des informations pour prendre en charge les langages de type fortement typé (ou les langages de type statique langages) tels que Java ou C.

En savoir plus des informations sur les langues dynamiques et les langues typées statiques.

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

Par défaut, Blockly autorise l'attribution de n'importe quel type à une variable et à tous Les générateurs de Blockly sont destinés aux langages saisis de manière dynamique. Si vous utilisez en utilisant un langage saisi à la place, vous pouvez configurer Blockly pour qu'il la prenne en charge en les éléments suivants:

Blocs de variables non typés

Les blocs les plus élémentaires pour accéder à une variable et la manipuler sont le getter et les blocs setter. Passons en revue les blocs getter et setter que Blockly fournit.

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 alors créés:

Il est important de noter qu'en définissant le paramètre "output" du getter de variable à null, la valeur renvoyée peut être de n'importe quel type. Notez également que la variable l'entrée du setter ne spécifie aucune vérification. La variable peut donc être définie à n'importe quel type de valeur.

Blocs à variables typées

Vous pouvez ajouter des getters et des setters qui appliquent la vérification du type. Par exemple, si vous créé une variable de type "Panda", les définitions suivantes créent une variable getter et 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. Leurs menus déroulants uniquement afficher les variables de type Panda. Leurs entrées et sorties n'acceptent avec le type Panda. La valeur defaultType du champ doit être définie sur un. des valeurs du tableau variableTypes. defaultType non défini le fait de fournir un tableau variableTypes entraînera la génération d'une erreur.

Par défaut, aucun indicateur visuel ne permet d'indiquer à l'utilisateur quel type utilisé. Vous pouvez facilement différencier les types de variables par couleur.

Ajouter des variables à la boîte à outils

Pour rendre ce nouveau type de variable utile pour vos utilisateurs, vous devez ajouter un moyen de créer et utiliser les nouvelles variables.

créer une catégorie dynamique ; pour les variables si vous n'en avez pas déjà une.

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

Bouton "Créer une variable"

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

Lors de la création du bouton, effectuez l'appel de rappel

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

et une variable de type Panda est créée.

Le moyen le plus simple pour permettre aux utilisateurs de créer des variables de plusieurs types est d'avoir « créer » Bouton par type (ex. : Créer une variable de chaîne, Créer un numéro "Créer une variable Panda").

Si vous avez plus de deux ou trois types de variables, vous pouvez rapidement obtenir Trop de boutons. Dans ce cas, envisagez d'utiliser @blockly/plugin-typed-variable-modal pour afficher une fenêtre pop-up permettant aux utilisateurs de sélectionner le type de variable souhaité.

Définir les 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 types ou Blockly.Workspace.getVariablesOfType() pour obtenir toutes les variables d'un type spécifique.