Structure de bloc en JavaScript

Dans ce document, nous allons voir comment utiliser JavaScript pour définir les entrées et les champs (y compris les libellés) de votre bloc. Si vous ne connaissez pas ces termes, consultez Anatomie d'un bloc avant de continuer.

Vous pouvez également définir vos entrées, vos champs et vos connexions au format JSON.

Ajouter des entrées

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

JavaScript

init: function() {
  // ...
  this.appendEndRowInput()
      .appendField('for each')
      .appendField('item')
      .appendField(new Blockly.FieldVariable(), 'VAR');
  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 appendInput peut prendre une chaîne d'identifiant, qui est utilisée par les générateurs de code pour récupérer le code du bloc connecté à l'entrée. Les générateurs de code font rarement référence aux entrées factices et de fin de ligne. Il n'y a donc généralement aucune raison de leur attribuer un identifiant.

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

JavaScript

init: function() {
  // ...
  this.appendInput(new MyCustomInput('INPUT_NAME'))
      .appendField('an example label')
}

Toutes les méthodes appendInput (génériques et non génériques) renvoient l'objet d'entrée afin qu'il puisse être configuré plus en détail à l'aide du chaînage de méthodes. Il existe trois méthodes intégrées pour configurer les entrées.

Champ pour l'ajout

Une fois une entrée créée et ajoutée à un bloc avec appendInput, vous pouvez éventuellement ajouter un nombre quelconque de champs à l'entrée. Ces champs sont souvent utilisés comme libellés pour décrire la fonction de chaque entrée.

JavaScript

init: function() {
  // ...
  this.appendDummyInput()
      .appendField('hello');
}

Le champ le plus simple est un libellé. La convention de Blockly consiste à utiliser du texte en minuscules, à l'exception des noms propres (par exemple, Google, SQL).

Une ligne d'entrée peut contenir un nombre illimité de champs. Plusieurs appels appendField peuvent être enchaînés pour ajouter efficacement plusieurs champs à la même ligne d'entrée.

JavaScript

init: function() {
  // ...
  this.appendDummyInput()
      .appendField('hello')
      .appendField(new Blockly.FieldLabel('Neil', 'person'));
}

L'appel appendField('hello') est en fait un raccourci pour utiliser un constructeur FieldLabel explicite : appendField(new Blockly.FieldLabel('hello')). Le constructeur ne doit être utilisé que pour spécifier un nom de classe afin que le libellé puisse être stylisé à l'aide d'une règle CSS.

Vérifications de la connexion

JavaScript

init: function() {
  // ...
  this.appendValueInput('NUM')
      .setCheck('Number');
}

La méthode setCheck est utilisée pour vérifier les types de connexions. Si un argument null est fourni (valeur par défaut), cette entrée peut être connectée à n'importe quel bloc. Pour en savoir plus, consultez Vérifications de la connexion.

Aligner les champs

JavaScript

init: function() {
  // ...
  this.appendValueInput('LIST')
      .appendField('in list')
      .setAlign(Blockly.inputs.Align.RIGHT);
}

La méthode setAlign permet d'aligner les champs d'une entrée. Trois valeurs auto-descriptives peuvent être transmises en tant qu'argument à cette fonction : Blockly.inputs.Align.LEFT, Blockly.inputs.Align.RIGHT et Blockly.inputs.Align.CENTER.

Lorsqu'un bloc est affiché en mode de droite à gauche (par exemple, en arabe et en hébreu), la gauche et la droite sont inversées. Ainsi, Blockly.inputs.Align.RIGHT alignerait les champs à gauche.