Définir des blocs

Les définitions de bloc décrivent l'apparence et le comportement d'un bloc, y compris le texte, la couleur, la forme et les autres blocs auxquels il peut se connecter.

Format JSON et API JavaScript

Blockly dispose de deux méthodes pour définir des blocs: les objets JSON et les fonctions JavaScript. Le format JSON est conçu pour simplifier la localisation lors du développement pour les langues dont l'ordre des mots est différent. Le format JSON est à privilégier de définition des blocs.

Toutefois, le format JSON ne permet pas de définir directement des fonctionnalités avancées telles que comme les mutateurs ou les validateurs. Ils doivent être écrits en JavaScript, généralement extensions.

Les applications qui utilisent l'implémentation JavaScript d'origine de Blockly peuvent également écrire les définitions de bloc directement aux appels de fonction de l'API Blockly de niveau inférieur, comme illustré dans les différents exemples JavaScript ci-dessous.

JSON

Blockly.defineBlocksWithJsonArray([{
  "type": "string_length",
  "message0": 'length of %1',
  "args0": [
    {
      "type": "input_value",
      "name": "VALUE",
      "check": "String"
    }
  ],
  "output": "Number",
  "colour": 160,
  "tooltip": "Returns number of letters in the provided text.",
  "helpUrl": "http://www.w3schools.com/jsref/jsref_length_string.asp"
}]);

JavaScript

Blockly.Blocks['string_length'] = {
  init: function() {
    this.appendValueInput('VALUE')
        .setCheck('String')
        .appendField('length of');
    this.setOutput(true, 'Number');
    this.setColour(160);
    this.setTooltip('Returns number of letters in the provided text.');
    this.setHelpUrl('http://www.w3schools.com/jsref/jsref_length_string.asp');
  }
};

La fonction init crée la forme du volume. Dans le contexte de cette le mot clé this correspond au bloc en cours de création.

Les deux exemples chargent la même longueur de chaîne .

Sur le Web, le format JSON est chargé à l'aide de la fonction initJson. Cela permet également de combiner les deux formats dans les pages Web Blockly. Il est Il est préférable de définir votre bloc avec JSON si possible et d'utiliser JavaScript uniquement pour les parties des définitions de bloc non compatibles avec JSON.

Vous trouverez ci-dessous un exemple de bloc principalement défini à l'aide de JSON, mais est étendu à l'aide de l'API JavaScript pour inclure une info-bulle dynamique.

JavaScript

var mathChangeJson = {
  "message0": "change %1 by %2",
  "args0": [
    {"type": "field_variable", "name": "VAR", "variable": "item", "variableTypes": [""]},
    {"type": "input_value", "name": "DELTA", "check": "Number"}
  ],
  "previousStatement": null,
  "nextStatement": null,
  "colour": 230
};

Blockly.Blocks['math_change'] = {
  init: function() {
    this.jsonInit(mathChangeJson);
    // Assign 'this' to a variable for use in the tooltip closure below.
    var thisBlock = this;
    this.setTooltip(function() {
      return 'Add a number to variable "%1".'.replace('%1',
          thisBlock.getFieldValue('VAR'));
    });
  }
};

Couleur du bloc

La couleur principale d'un bloc est définie par la propriété JSON colour, la fonction block.setColour(..), ou en utilisant des thèmes et en définissant un bloc du style.

JSON

{
  // ...,
  "colour": 160,
}

JavaScript

init: function() {
  // ...
  this.setColour(160);
}

Consultez le guide des couleurs de bloc. pour en savoir plus.

Connexions aux instructions

Les utilisateurs peuvent créer des séquences de blocs à l'aide des nextStatement et previousStatement. Dans la mise en page standard de Blockly, ces connexions se trouvent en haut et en bas, avec les blocs empilés verticalement.

Un bloc possédant un connecteur précédent ne peut pas avoir connecteur de sortie, et inversement. Le terme bloc d'instructions fait référence à un bloc sans valeur de sortie. Un bloc d’instruction aura généralement à la fois une connexion précédente et une connexion suivante.

Les connexions nextStatement et previousStatement peuvent être typé, mais cette fonctionnalité n'est pas utilisée par les blocs standards.

Connexion suivante

Crée un point en bas du bloc, de sorte que d'autres instructions puissent être empilées en dessous. Bloc avec une connexion suivante, mais aucune connexion précédente représente généralement un événement et peut être configuré pour afficher un chapeau.

JSON

Non typée:

{
  ...,
  "nextStatement": null,
}

Type saisi (rare):

{
  "nextStatement": "Action",
  ...
}

JavaScript

Non typée:

this.setNextStatement(true);  // false implies no next connector, the default

Saisie (rare):

this.setNextStatement(true, 'Action');

Connexion précédente

Crée une encoche en haut du bloc, de sorte qu'il puisse être connecté en tant que pile de déclarations.

Les blocs avec une connexion précédente ne peuvent pas avoir de connexion de sortie.

JSON

Non typée:

{
  ...,
  "previousStatement": null,
}

Type saisi (rare):

{
  "previousStatement": "Action",
  ...
}

JavaScript

Non typée:

this.setPreviousStatement(true);  // false implies no previous connector, the default

Saisie (rare):

this.setPreviousStatement(true, 'Action');

Sortie du bloc

Un bloc peut avoir une seule sortie, représentée par un connecteur mâle sur le à l'extrémité gauche. Les sorties sont connectées aux entrées des valeurs. Les blocs avec une sortie sont généralement appelés blocs de valeurs.

JSON

Non typée:

{
  // ...,
  "output": null,
}

Tapé:

{
  // ...,
  "output": "Number",
}

JavaScript

Non typée:

init: function() {
  // ...
  this.setOutput(true);
}

Type saisi:

init: function() {
  // ...
  this.setOutput(true, 'Number');
}

Les blocs dotés d'un connecteur de sortie ne peuvent pas également avoir d'encoche d'instruction précédente.

Bloquer les entrées

Un bloc comporte une ou plusieurs entrées, chaque entrée ayant une séquence de champs et peuvent se terminer par une connexion. Il existe plusieurs types d'entrées intégrées.

  • Entrée de valeur: se connecte à la connexion de sortie d'un bloc de valeur. Un bloc math_arithmetic (addition, soustraction) est un exemple de bloc avec deux entrées de valeurs.
  • Saisie d'instruction: se connecte à un connexion précédente d'un bloc d'instructions. La la section imbriquée d'une boucle "while" est un exemple d'entrée d'instruction.
  • Dummy input (Entrée factice) : n'a pas de connexion en bloc. Agit comme une nouvelle ligne lorsque le bloc est configuré pour utiliser des entrées de valeurs externes.
  • Entrée de ligne de fin: n'a pas de connexion de bloc et agit toujours comme un retour à la ligne.

Vous pouvez également créer une entrée personnalisée pour accepter le rendu.

Le format JSON et l'API JavaScript utilisent des modèles légèrement différents pour décrire leurs entrées.

Entrées et champs au format JSON

Les blocs définis au format JSON sont structurés sous la forme d'une séquence de séquences interpolées des chaînes de message ( message0, message1, ...), où chaque jeton d'interpolation (%1, %2, ...) est un champ ou une extrémité d'entrée (où le connecteur d'entrée s'affiche, dans le message) dans le tableau JSON argsN correspondant. Ce format est pour faciliter l'internationalisation.

JSON

{
  "message0": "set %1 to %2",
  "args0": [
    {
      "type": "field_variable",
      "name": "VAR",
      "variable": "item",
      "variableTypes": [""]
    },
    {
      "type": "input_value",
      "name": "VALUE"
    }
  ]
}

Les jetons d'interpolation doivent correspondre complètement au tableau args0: aucun doublon, sans aucune omission. Les jetons peuvent être présents dans n'importe quel ordre, ce qui permet pour modifier la mise en page du bloc.

Les espaces blancs sont supprimés de chaque côté d'un jeton d'interpolation. Pour les textes utilisant le caractère % (par exemple, lorsqu'il fait référence à un pourcentage), utilisez %% afin qu'il ne soit pas interprété comme un jeton d'interpolation.

L'ordre des arguments et les types d'arguments définissent la forme du . La modification de l'une de ces chaînes peut complètement modifier la mise en page du bloc. C'est particulièrement important dans les langues dont l'ordre des mots est différent. qu'en anglais. Prenons un langage fictif dans lequel "set %1 to %2" (tel qu'il est utilisé dans l'exemple ci-dessus) doit être inversée pour indiquer "put %2 in %1". Modification... cette chaîne unique (en laissant le reste du code JSON untouched) génère le bloc suivant:

Blockly change automatiquement l'ordre des champs, crée une entrée factice, et basculés des entrées externes vers des entrées internes.

Blockly remplace aussi automatiquement tout caractère de nouvelle ligne (\n) dans le message avec une entrée de ligne de fin.

JSON

{
  "message0": "set %1\nto %2",
  "args0": [
    {
      "type": "field_variable",
      "name": "VAR",
      "variable": "item",
      "variableTypes": [""]
    },
    {
      "type": "input_value",
      "name": "VALUE"
    }
  ]
}

Args

Chaque chaîne de message est associée à un tableau args du même nombre. Pour Par exemple, message0 correspond à args0. Les jetons d'interpolation (%1, %2, ...) fait référence aux éléments du tableau args. Chaque objet possède une Chaîne type. Les autres paramètres varient en fonction du type:

Vous pouvez également définir vos propres champs personnalisés et entrées personnalisées et les transmettre en tant qu'arguments.

Chaque objet peut également comporter un champ alt. Dans le cas où Blockly reconnaître le type de l'objet, l'objet alt est utilisé à sa place. Pour Par exemple, si un nouveau champ nommé field_time est ajouté à Blockly, le blocage à l'aide de ce champ pourrait utiliser alt pour définir une création de remplacement field_input pour les anciennes versions de Blockly:

JSON

{
  "message0": "sound alarm at %1",
  "args0": [
    {
      "type": "field_time",
      "name": "TEMPO",
      "hour": 9,
      "minutes": 0,
      "alt":
        {
          "type": "field_input",
          "name": "TEMPOTEXT",
          "text": "9:00"
        }
    }
  ]
}

Un objet alt peut avoir son propre objet alt, ce qui permet le chaînage. En fin de compte, si Blockly ne peut pas créer d'objet dans le tableau args0 (après tentant d'effectuer n'importe quel objet alt), cet objet est simplement ignoré.

Une entrée factice est automatiquement ajoutée à la fin du bloc si le La chaîne message se termine par du texte ou des champs qui ne sont pas inclus dans une entrée. Ainsi, si la dernière entrée d'un bloc est une entrée factice, elle peut être omise le tableau args. Aucune interpolation n'est nécessaire dans message. La l'ajout automatique d'une entrée factice permettant aux traducteurs de changer message sans avoir à modifier le reste du fichier JSON. Voir l'exemple de "set %1 to %2" (aucune entrée factice) et "put %2 in %1" (entrée factice ajoutée) plus tôt sur cette page.

implicitAlign0

Dans de rares cas, l'entrée factice de fin créée automatiquement doit être alignée à "RIGHT" ou "CENTRE". Si aucune valeur n'est spécifiée, la valeur par défaut est "LEFT".

Dans l'exemple ci-dessous, message0 correspond à "send email to %1 subject %2 secure %3". et Blockly ajoute automatiquement une entrée factice pour la troisième ligne. Paramètre implicitAlign0 sur "RIGHT" force l'alignement de cette ligne à droite. Ce s'applique à toutes les entrées qui ne sont pas définies explicitement dans le fichier définition du bloc, y compris les entrées de ligne de fin qui remplacent les caractères de nouvelle ligne ('\n') dans le message. Il existe aussi la propriété obsolète lastDummyAlign0. qui a le même comportement que implicitAlign0.

Lors de la conception des blocs pour l'arabe et l'hébreu, de droite à gauche et en hébreu, ils sont inversés. Ainsi, "RIGHT" aligne les champs à gauche.

message1, args1, implicitAlign1

Certains blocs sont naturellement divisés en deux ou plusieurs parties distinctes. Considérons ce bloc « Repeat » qui contient deux lignes:

Si ce bloc était décrit dans un seul message, la propriété message0 serait "repeat %1 times %2 do %3". Cette chaîne est gênante pour un traducteur, il est difficile d'expliquer la signification de la substitution %2. Le %2 factice la saisie peut même ne pas être souhaitée dans certaines langues. Et il peut y avoir plusieurs les blocs qui souhaitent partager le texte de la deuxième ligne. Une meilleure approche permet à JSON d'utiliser plusieurs propriétés de message et d'arguments:

JSON

{
  "type": "controls_repeat_ext",
  "message0": "repeat %1 times",
  "args0": [
    {"type": "input_value", "name": "TIMES", "check": "Number"}
  ],
  "message1": "do %1",
  "args1": [
    {"type": "input_statement", "name": "DO"}
  ],
  "previousStatement": null,
  "nextStatement": null,
  "colour": 120
}

Vous pouvez définir autant de propriétés message, args et implicitAlign que vous le souhaitez au format JSON, en commençant par 0 et en les incrémentant de manière séquentielle. Notez que la Block Factory n'est pas capable de diviser les messages en plusieurs parties, mais le faire manuellement est simple.

Entrées et champs en JavaScript

L'API JavaScript inclut une méthode append pour chaque type d'entrée:

JavaScript

this.appendEndRowInput()
    .appendField('for each')
    .appendField('item')
    .appendField(new Blockly.FieldVariable());
this.appendValueInput('LIST')
    .setCheck('Array')
    .setAlign(Blockly.inputs.Align.RIGHT)
    .appendField('in list');
this.appendStatementInput('DO')
    .appendField('do');
this.appendDummyInput()
    .appendField('end');

Chaque méthode "append" peut utiliser une chaîne d'identifiant, utilisée par les générateurs de code. Factice et les entrées de ligne de fin nécessitent rarement un référencement et l'identifiant est généralement laissé non définie.

L'API JavaScript inclut également une méthode générique appendInput pour ajouter entrées personnalisées. Notez que dans ce cas, l'identifiant doit être transmis directement au constructeur de votre entrée personnalisée.

JavaScript

this.appendInput(new MyCustomInput('INPUT_NAME'))
    .appendField('an example label')

Toutes les méthodes appendInput (génériques et non génériques) renvoient le objet d'entrée afin de pouvoir les configurer davantage à l'aide d'un chaînage de méthodes. Il y sont trois méthodes intégrées utilisées pour configurer les entrées.

setCheck

JavaScript

input.setCheck('Number');

Cette fonction facultative permet de vérifier le type des entrées connectées. Le cas échéant un argument "null", la valeur par défaut, alors cette entrée peut être connectée à n'importe quel bloc. Pour en savoir plus, consultez la section Vérifications de type.

setAlign

JavaScript

input.setAlign(Blockly.inputs.Align.RIGHT);

Cette fonction facultative permet d'aligner les champs (voir ci-dessous). Il y en a trois valeurs autodescriptives pouvant être transmises en tant qu'argument à cette fonction: Blockly.inputs.Align.LEFT, Blockly.inputs.Align.RIGHT et Blockly.inputs.Align.CENTER

Lors de la conception des blocs pour l'arabe et l'hébreu, de droite à gauche et en hébreu, ils sont inversés. Ainsi, Blockly.inputs.Align.RIGHT aligne les champs à gauche.

appendField

Une fois qu'une entrée a été créée et ajoutée à un bloc avec appendInput, une peut éventuellement ajouter un nombre illimité de champs à l'entrée. Ces champs servent souvent d'étiquettes pour décrire le but de chaque entrée.

JavaScript

input.appendField('hello');

L'élément de champ le plus simple est le texte. La convention de Blockly consiste à utiliser tous les minuscules, à l'exception des noms propres (par exemple, Google, SQL).

Une ligne d'entrée peut contenir un nombre illimité d'éléments de champ. Plusieurs appendField peuvent être chaînés pour ajouter efficacement plusieurs champs au même ligne d'entrée.

JavaScript

input.appendField('hello')
     .appendField(new Blockly.FieldLabel('Neil', 'person'));

L'appel appendField('hello') est en fait un raccourci pour utiliser un Constructeur FieldLabel: appendField(new Blockly.FieldLabel('hello')). Vous ne pouvez utiliser le constructeur que lorsque vous spécifiez nom de classe de sorte que le texte puisse être stylisé à l'aide d'une règle CSS.

Intégré ou externe

Les entrées de bloc peuvent s'afficher comme externes ou internes.

La définition du bloc peut spécifier une valeur booléenne facultative pour contrôler si les entrées sont intégrés ou non. Si la valeur est false, toutes les entrées de valeurs seront externes (comme dans le bloc de gauche). Si la valeur est true, toutes les entrées de valeur seront intégrées (comme bloc de droite ci-dessus).

JSON

{
  // ...,
  "inputsInline": true
}

JavaScript

init: function() {
  // ...
  this.setInputsInline(true);
}

S'il n'est pas défini, Blockly utilisera quelques heuristiques pour deviner quel mode le meilleur. Supposer que Blockly fait le bon choix, ce qui laisse ce champ non défini est préférable, car les traductions dans différentes langues peuvent avoir différents modes. Consultez l'exemple JSON de "set %1 to %2" (entrées externes). "put %2 in %1" (entrées intégrées) plus tôt sur cette page.

Utilisez des entrées intégrées lorsqu'un bloc est susceptible de contenir des entrées de petite taille, telles que des nombres. L'utilisateur peut activer/désactiver cette option via le menu contextuel, si collapse est activée (la valeur par défaut est "true" si la boîte à outils comporte des catégories).

Champs

Les champs définissent la majorité des éléments d'interface utilisateur dans un bloc. Il s'agit notamment des étiquettes de chaîne, des images et des entrées Données literal comme les chaînes et les nombres. L'exemple le plus simple est le bloc math_number, qui utilise un field_input pour permettre à l'utilisateur de saisir un nombre.

Les champs sont ajoutés au bloc à l'aide de appendField.

Blockly fournit un certain nombre de champs intégrés, y compris des entrées de texte, des sélecteurs de couleur, et des images. Vous pouvez également créer vos propres champs.

→ En savoir plus sur les champs intégrés

→ En savoir plus sur la création de champs personnalisés

Icônes

Les icônes définissent les éléments d'interface utilisateur sur un bloc qui fait apparaître le terme "meta" des informations sur le .

Les icônes sont ajoutées au bloc à l'aide de addIcon.

Blockly fournit un certain nombre d'icônes intégrées, y compris des icônes de commentaires. et d'avertissement. Vous pouvez également créer vos propres icônes.

→ En savoir plus sur la création d'icônes personnalisées

Info-bulles

Les info-bulles offrent une aide instantanée lorsque l'utilisateur pointe sur le bloc. Si le texte est long, le retour à la ligne automatique est effectué.

JSON

{
  // ...,
  "tooltip": "Tooltip text."
}

JavaScript

init: function() {
  this.setTooltip("Tooltip text.");
}

Dans l'API JavaScript, les info-bulles peuvent également être définies en tant que fonction plutôt qu'en tant que une chaîne statique. Vous bénéficiez ainsi d'une aide dynamique. Consultez math_arithmetic pour voir exemple d'info-bulle qui change en fonction de l'option de menu déroulant qui a été choisi.

JavaScript

Blockly.Blocks['math_arithmetic'] = {
  init: function() {
    // ...

    // Assign 'this' to a variable for use in the tooltip closure below.
    var thisBlock = this;
    this.setTooltip(function() {
      var mode = thisBlock.getFieldValue('OP');
      var TOOLTIPS = {
        'ADD': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_ADD,
        'MINUS': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_MINUS,
        'MULTIPLY': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_MULTIPLY,
        'DIVIDE': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_DIVIDE,
        'POWER': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_POWER
      };
      return TOOLTIPS[mode];
    });
  }
};

Avec l'API JavaScript, les blocs peuvent spécifier une fonction plutôt qu'une valeur qui renvoie la chaîne de l'info-bulle. Cela permet d'afficher des info-bulles dynamiques. Consultez math_arithmetic pour obtenir un exemple.

Personnalisation

Vous pouvez également personnaliser l'apparence de vos info-bulles en proposant un affichage personnalisé. . Créez une fonction qui accepte deux paramètres:

  • Tout d'abord, un élément <div> dans lequel vous allez afficher le contenu
  • Ensuite, l'élément sur lequel vous passez la souris l'info-bulle pour

Dans le corps de la fonction, vous pouvez afficher n'importe quel contenu div. Pour définir la chaîne d'info-bulle sur le bloc sur lequel vous passez la souris, vous pouvez appeler Blockly.Tooltip.getTooltipOfObject(element);, où element est le le deuxième paramètre ci-dessus.

Enfin, enregistrez cette fonction pour que Blockly puisse l'appeler au moment opportun:

Blockly.Tooltip.setCustomTooltip(yourFnHere);

Pour voir un exemple, consultez la Démonstration des info-bulles personnalisées

URL de l'aide

Les blocages peuvent être associés à une page d'aide. Cette fonctionnalité est disponible les utilisateurs de Blockly pour le Web en effectuant un clic droit sur le bloc et en sélectionnant "Aide" ; dans le menu contextuel. Si cette valeur est null, le menu est grisé s'affiche.

JSON

{
  // ...,
  "helpUrl": "https://en.wikipedia.org/wiki/For_loop"
}

JavaScript

init: function() {
  // ...
  this.setHelpUrl('https://en.wikipedia.org/wiki/For_loop');
}

Avec l'API JavaScript, les blocs peuvent spécifier une fonction plutôt qu'une valeur chaîne, qui renvoie une chaîne d'URL, ce qui permet une aide dynamique.

Modifier les écouteurs et les validateurs

Les blocs peuvent avoir des fonctions d'écouteur de modification appelées à chaque modification du dans l'espace de travail (y compris ceux qui ne sont pas liés au bloc). Ils sont principalement utilisés pour définissez le texte d'avertissement du blocage ou une notification utilisateur similaire en dehors dans l'espace de travail.

La fonction est ajoutée en appelant setOnChange avec une fonction et peut être faite pendant l'initialisation ou via une extension JSON si vous prévoyez de l'utiliser. sur toutes les plates-formes.

JSON

{
  // ...,
  "extensions":["warning_on_change"],
}

Blockly.Extensions.register('warning_on_change', function() {
  // Example validation upon block change:
  this.setOnChange(function(changeEvent) {
    if (this.getInput('NUM').connection.targetBlock()) {
      this.setWarningText(null);
    } else {
      this.setWarningText('Must have an input block.');
    }
  });
});

JavaScript

Blockly.Blocks['block_type'] = {
  init: function() {
    // Example validation upon block change:
    this.setOnChange(function(changeEvent) {
      if (this.getInput('NUM').connection.targetBlock()) {
        this.setWarningText(null);
      } else {
        this.setWarningText('Must have an input block.');
      }
    });
  }
}

Le système appelle la fonction, en transmettant événement de modification. Dans la fonction, this fait référence à l'instance de bloc.

Comme la fonction est appelée en cas de modification, les développeurs doivent s'assurer qu'ils l'écouteur s'exécute rapidement. Il faut aussi se méfier des modifications apportées à l'espace de travail. qui peuvent être transmis en cascade ou en boucle à l'écouteur.

Consultez les controls_flow_statements, les logic_compare et les procedures_ifreturn pour obtenir des exemples.

Notez que les champs modifiables disposent de leurs propres écouteurs d'événements pour la validation des entrées. et provoque des effets secondaires.

Mutateur

Les mutateurs permettent aux blocs avancés de changer de forme, notamment à la suite de utilisateurs ouvrant une boîte de dialogue pour ajouter, supprimer ou réorganiser des composants. Les mutants peuvent être ajoutée via JSON avec la clé mutator.

JSON

{
  // ...,
  "mutator":"if_else_mutator"
}

Configuration par bloc

Les instances de blocage disposent d'un certain nombre de propriétés qui configurent leur comportement l'utilisateur. Vous pouvez les utiliser pour contraindre l'espace de travail à refléter certaines les propriétés du domaine (par exemple, s'il y a exactement un événement "start") ou de sélectionner les efforts de l'utilisateur (par exemple, un tutoriel).

État supprimable

block.setDeletable(false);

Si cette règle est définie sur "false", l'utilisateur ne peut pas supprimer le blocage. Blocages par défaut à supprimer dans un espace de travail modifiable.

Tous les blocs, même ceux qui ne peuvent pas être supprimés, peuvent être supprimés par programmation:

block.dispose();

État modifiable

block.setEditable(false);

Si cette règle est définie sur "false", l'utilisateur ne peut pas modifier les champs du bloc (par exemple, des menus déroulants et des entrées de texte). Les blocages sont par défaut modifiables sur dans l'espace de travail.

État mobile

block.setMovable(false);

Si cette règle est définie sur "false", l'utilisateur ne peut pas déplacer le bloc directement. Une Un bloc fixe, enfant d'un autre bloc, ne doit pas être déconnecté du ce bloc, bien qu'il se déplace avec son parent si le parent est déplacé. Contres peut être déplacée par défaut dans un espace de travail modifiable.

Tous les blocs (même fixes) peuvent être déplacés par programmation une fois sur un dans l'espace de travail.

block.moveBy(dx, dy)

Par défaut, la position de départ d'un volume dans un espace de travail est (0, 0).

Bloquer les données

this.data = '16dcb3a4-bd39-11e4-8dfc-aa07a5b093db';

"data" correspond à une chaîne facultative et arbitraire associée au bloc. Lorsque est sérialisée avec la chaîne de données. Cela inclut les cas le bloc est dupliqué ou copié/collé.

Souvent utilisé pour associer un bloc à une ressource externe.

Une fois sérialisées au format JSON, les données sont stockées en tant que propriété de premier niveau dans le bloc:

{
  "type": "my_block",
  "data": "16dcb3a4-bd39-11e4-8dfc-aa07a5b093db",
  // etc..
}

Lorsqu'elle est sérialisée au format XML (ancien système de sérialisation icebox), la chaîne de données est stocké dans une balise <data></data> du bloc:

<block type="my_block">
  <data>16dcb3a4-bd39-11e4-8dfc-aa07a5b093db</data>
  <!-- etc... -->
</block>

Destruction

Les blocs possèdent un hook destroy, qui est appelé lorsqu'ils sont supprimés du dans l'espace de travail. Cela peut être utilisé pour détruire les modèles de données de sauvegarde/externes associées au bloc et qui ne sont plus nécessaires.

JSON

{
  // ...,
  "extensions":["destroy"],
}

Blockly.Extensions.registerMixin('destroy', {
  destroy: function() {
    this.myResource.dispose();
  }
});

JavaScript

Blockly.Blocks['block_type'] = {
  destroy: function() {
    this.myResource.dispose();
  }
}

La méthode destroy est appelée après la suppression du parent du bloc, mais avant la suppression de ses enfants ou de ses champs.

Menus contextuels

Par défaut, les blocs disposent d'un menu contextuel par clic droit qui permet aux utilisateurs de faire comme ajouter des commentaires ou dupliquer des blocs.

Vous pouvez désactiver le menu contextuel d'un bloc en procédant comme suit:

block.contextMenu = false;

Vous pouvez également personnaliser les options affichées dans le menu. Pour personnaliser le menu de tous les blocs, reportez-vous documentation sur les menus contextuels Pour personnaliser le menu d'un bloc, vous pouvez implémenter customContextMenu Cette fonction prend un tableau d'options de menu et le modifie pour le remplacer, ce qui signifie que vous pouvez à la fois ajouter et supprimer des éléments.

Chaque option de menu est un objet avec trois propriétés:

  • text est le texte à afficher.
  • enabled est une valeur booléenne. Lorsqu'elle est désactivée, l'option s'affiche, mais en gris. du texte.
  • callback est la fonction à appeler lorsque l'utilisateur clique sur l'option.