Anatomie d'un bloc

Ce document décrit les différentes parties d'un bloc.

Connexions

Les connexions définissent les emplacements où les blocs peuvent se connecter et les types de blocs auxquels ils peuvent se connecter.

Il existe quatre types de connexions:

Type de connexion Image
Connexion de sortie une connexion de sortie
Connexion d'entrée une connexion d'entrée
Connexion précédente une connexion précédente ;
Prochaine connexion une autre connexion

Les connexions de sortie et les connexions d'entrée peuvent se connecter entre elles, et les connexions suivantes et les connexions précédentes peuvent se connecter entre elles. Vous pouvez également limiter davantage les connexions à l'aide de vérifications de connexion.

Vous pouvez personnaliser les formes des connexions à l'aide d'un moteur de rendu personnalisé.

Connexions de niveau supérieur

Les blocs comportent trois connexions dont l'utilisation est facultative.

Un bloc peut avoir une seule connexion de sortie, représentée par un connecteur mâle en forme de puzzle sur le bord avant du bloc. Une connexion de sortie transmet la valeur (expression) d'un bloc à un autre. Un bloc avec une connexion de sortie est appelé bloc de valeur.

Un bloc math_number.

Un bloc peut avoir une connexion précédente en haut (représentée par une encoche) et une connexion suivante en bas (représentée par un onglet). Ils permettent de superposer des blocs verticalement, ce qui représente une séquence d'instructions. Un bloc sans connexion de sortie est appelé bloc d'instructions et comporte généralement des connexions précédentes et suivantes.

Un bloc variables_set.

Pour en savoir plus, consultez la section Connexions de niveau supérieur.

Champs

Les champs définissent la majorité des éléments d'interface utilisateur d'un bloc. Il s'agit des libellés de chaîne, des menus déroulants, des cases à cocher, des images et des entrées pour les données littérales telles que les chaînes et les nombres. Par exemple, ce bloc de boucle utilise des champs de libellé, un champ déroulant et des champs numériques.

Bloc avec plusieurs champs

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.

Pour en savoir plus, consultez la section Champs.

Entrées

Les entrées sont des conteneurs de champs et de connexions. Un bloc est créé en affichant ses entrées sur une ou plusieurs lignes, comme des briques.

Il existe quatre types d'entrées différents, qui peuvent tous contenir des champs (y compris des libellés) et dont deux contiennent une seule connexion. Vous pouvez également créer des entrées personnalisées, qui sont compatibles avec le rendu personnalisé.

Type d'entrée Type de connexion Image
Entrée factice Aucune entrée factice
Entrée de fin de ligne Aucune saisie de fin de ligne
Saisie de la valeur Connexion d'entrée saisie de valeur
Saisie de l'énoncé Prochaine connexion saisie d'instructions

Nous allons présenter ces entrées à l'aide d'une série d'exemples. Pour en savoir plus sur la définition des entrées, des connexions et des champs qui constituent un bloc, consultez Structure de bloc en JSON et Structure de bloc en JavaScript.

Entrées factices

Une entrée factice n'est qu'un conteneur de champs. Elle n'a pas de connexion. Par exemple, le bloc de nombres suivant comporte une seule entrée fictive contenant un seul champ numérique.

Bloc de nombres avec une entrée fictive et un champ numérique.

Prenons un exemple plus complexe : un bloc qui additionne deux nombres. Cela peut être créé à partir d'une seule entrée fictive avec trois champs (numéro, libellé, numéro):

Bloc d'addition créé à partir d'une entrée fictive avec trois champs.

ou trois entrées fictives, chacune avec un seul champ:

Bloc d'addition créé à partir de trois entrées fictives, chacune avec un seul champ.

Entrées de fin de ligne

Blockly utilise des heuristiques pour décider d'afficher toutes les entrées sur une seule ligne ou d'afficher chaque entrée sur sa propre ligne. Si vous voulez vous assurer qu'une entrée commence une nouvelle ligne, utilisez une entrée de fin de ligne comme entrée précédente.

Comme les entrées fictives, les entrées de fin de ligne peuvent contenir des champs, mais ne sont pas associées à une connexion. Par exemple, voici le bloc d'addition créé à partir d'une entrée de fin de ligne avec deux champs et d'une entrée fictive avec un champ. L'entrée de fin de ligne force l'entrée fictive à être affichée dans une nouvelle ligne.

Bloc d'addition divisé en deux lignes par une entrée de fin de ligne.

Valeurs d'entrée

Les champs sont limités dans ce qu'ils peuvent accepter. Par exemple, les champs numériques n'acceptent que des chiffres. Mais que faire si vous souhaitez ajouter deux variables ? Ou ajouter le résultat d'un appel de procédure au résultat d'un autre calcul ? Pour résoudre ce problème, utilisez des connexions d'entrée au lieu de champs. Cela permet aux utilisateurs d'utiliser des blocs de valeurs comme valeurs d'entrée.

Une entrée de valeur contient zéro ou plusieurs champs et se termine par une connexion d'entrée. Le bloc suivant remplace les champs numériques du bloc d'addition par des connexions d'entrée. Il est composé de deux entrées de valeurs : la première ne contient aucun champ et la seconde contient un champ de libellé. Les deux extrémités se terminent par des connexions d'entrée.

Bloc d'addition avec deux entrées de valeur.

Entrées de l'instruction

Le dernier type d'entrée est une entrée d'instruction, qui contient zéro ou plusieurs champs et se termine par une connexion suivante. La connexion suivante vous permet d'imbriquer une pile de blocs d'instructions dans votre bloc. Prenons l'exemple du bloc de répétition suivant. La deuxième ligne de ce bloc se compose d'une entrée d'instruction avec un seul champ de libellé et une connexion suivante.

Bloc de répétition avec une entrée d'instruction pour imbriquer des instructions répétées.

Les entrées d'instruction sont toujours affichées sur leur propre ligne. Vous pouvez le voir dans le bloc if-then-else suivant, qui comporte une valeur d'entrée dans sa première ligne et des entrées d'instruction dans les deux lignes suivantes.

Bloc if-then-else avec des entrées d'instructions distinctes pour les instructions then et else.

Entrées intégrées et externes

Les entrées peuvent être affichées en ligne ou en externe. Ce paramètre permet de contrôler si les connecteurs pour les entrées de valeurs sont affichés à l'intérieur du bloc (en ligne) ou sur le bord extérieur (externe), ainsi que si les entrées sont affichées sur la même ligne ou sur des lignes différentes.

Même bloc affiché une fois avec des entrées intégrées et une fois avec des entrées externes.

Lorsque vous créez un bloc personnalisé, vous pouvez spécifier celui à utiliser ou laisser Blockly décider à votre place. Pour en savoir plus, consultez la section Entrées intégrées et externes.

Vous pouvez jouer !

Le meilleur moyen d'en savoir plus sur les entrées, les champs et les connexions est de créer des blocs dans les outils de développement Blockly et de choisir différents paramètres pour le menu déroulant inputs (automatic, external, inline).

Icônes

En plus des entrées, des connexions et des champs, les blocs peuvent comporter une ou plusieurs icônes. Ils ont diverses utilisations, telles que l'affichage d'avertissements, la saisie de commentaires au niveau du bloc ou l'affichage de l'UI du modificateur. Par exemple, voici un bloc avec une icône de commentaire et l'éditeur associé.

Bloc avec une icône de commentaire et un éditeur de commentaires ouvert.

Pour en savoir plus, consultez la section Icônes.

Blocs et objets JavaScript

Les blocs, les entrées, les connexions, les champs et les icônes sont tous des objets JavaScript.

Composant Blockly Classe de base Sous-classes
Bloquer Block BlockSvg
Entrée Input DummyInput
EndRowInput
ValueInput
StatementInput
entrée personnalisée
Connexion Connection RenderedConnection
Champ Field FieldTextInput
FieldNumber
FieldLabel
champ personnalisé
etc.
Icône Icon CommentIcon
MutatorIcon
WarningIcon
icône personnalisée

Les objets d'un bloc forment un objet en forme d'arbre. Comprendre comment la représentation graphique d'un bloc correspond à cet arbre est utile lorsque vous écrivez du code pour manipuler des blocs de manière programmatique. Par exemple, un bloc controls_for:

Un bloc de boucle avec un champ de variable, des entrées de valeur pour "to", "from" et "by", et une entrée d'instruction pour les instructions répétées.

correspond à l'arborescence d'objets JavaScript suivante.

// <Object> means an instance of an Object.
{                                   // Block
  nextConnection: <Connection>,     // ConnectionType NEXT_STATEMENT
  outputConnection: null,
  previousConnection: <Connection>, // ConnectionType PREVIOUS_STATEMENT
  inputList: [                      // Array of Inputs in block
    {                               // ValueInput
      connection: <Connection>,     // ConnectionType INPUT_VALUE
      fieldRow: [                   // Array of fields in Input
        <FieldLabel>,               // 'count with'
        <FieldVariable>,            // i
        <FieldLabel>,               // 'from'
      ],
    },
    {                               // ValueInput
      connection: <Connection>,     // ConnectionType INPUT_VALUE
      fieldRow: [
        <FieldLabel>,               // 'to'
      ],
    },
    {                               // ValueInput
      connection: <Connection>,     // ConnectionType INPUT_VALUE
      fieldRow: [
        <FieldLabel>,               // 'by'
      ],
    },
    {                               // StatementInput
      connection: <Connection>,     // ConnectionType NEXT_STATEMENT
      fieldRow: [
        <FieldLabel>,               // 'do'
      ],
    },
  ]
}