Cette page a été traduite par l'API Cloud Translation.

Anatomie d'un bloc

Ce document explore 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
Connexion d'entrée
Connexion précédente
Prochaine correspondance

Les connexions de sortie et d'entrée peuvent être connectées entre elles, tout comme les connexions "Suivant" et "Précédent". Vous pouvez restreindre davantage les connexions avec les vérifications des connexions.

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

Connexions de premier niveau

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 pièce de puzzle sur le bord avant d'un bloc. Une connexion de sortie transmet la valeur (expression) d'un bloc à un autre bloc. Un bloc avec une connexion de sortie est appelé bloc de valeur.

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 une languette). Ils permettent d'empiler les blocs verticalement, ce qui représente une séquence d'instructions. Un bloc sans connexion de sortie est appelé bloc d'instruction et comporte généralement des connexions précédentes et suivantes.

Bloc variables_set.

Pour en savoir plus, consultez Connexions de premier niveau.

Champs

Les champs définissent la majorité des éléments d'interface utilisateur d'un bloc. Il s'agit notamment 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 de menu déroulant et des champs numériques.

Bloc avec plusieurs champs.

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

Pour en savoir plus, consultez Champs.

Entrées

Les entrées sont des conteneurs pour les champs et les 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). Deux d'entre eux 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	Aucun
Entrée de fin de ligne	Aucun
Saisie de la valeur	Connexion d'entrée
Saisie des relevés	Prochaine correspondance

Nous allons présenter ces entrées à travers une série d'exemples. Pour savoir comment définir les entrées, les connexions et les champs qui composent un bloc, consultez Structure des blocs en JSON et Structure des blocs 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. Il pourrait être créé à partir d'une seule entrée fictive avec trois champs (nombre, libellé, nombre) :

Bloc d'addition construit à partir d'une entrée factice avec trois champs.

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

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

Entrées de fin de ligne

Blockly utilise des heuristiques pour déterminer s'il doit afficher toutes les entrées sur une seule ligne ou sur des lignes distinctes. Si vous voulez être sûr 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 n'ont pas de connexion. Par exemple, voici le bloc d'addition construit à partir d'une entrée de fin de ligne avec deux champs et d'une entrée factice avec un champ. L'entrée de fin de ligne force l'entrée factice à être affichée sur 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 nombres. Mais que se passe-t-il si vous souhaitez ajouter deux variables ? Ou ajouter le résultat d'un appel de procédure à celui 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 créé à partir de deux entrées de valeur : la première ne contient aucun champ et la seconde contient un champ de libellé. Les deux se terminent par des connexions d'entrée.

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

Entrées d'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 "Suivant". La connexion suivante vous permet d'imbriquer une pile de blocs d'instructions dans votre bloc. Par exemple, considérons le 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 "suivant".

Bloc de répétition avec une entrée d'instruction pour imbriquer les 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 entrée de valeur 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'instruction 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 contrôle si les connecteurs pour les entrées de valeur sont affichés à l'intérieur du bloc (en ligne) ou sur le bord extérieur (externe), et si les entrées sont affichées sur la même ligne ou sur des lignes différentes.

Le même bloc rendu 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 pour vous. Pour en savoir plus, consultez Entrées intégrées et externes.

À vous de jouer !

La meilleure façon d'en savoir plus sur les entrées, les champs et les connexions est de créer des blocs dans les outils pour les développeurs Blockly et de choisir différents paramètres dans 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. Elles ont diverses utilisations, comme l'affichage d'avertissements, la saisie de commentaires au niveau du bloc ou l'affichage de l'UI du mutateur. Par exemple, voici un bloc avec une icône de commentaire et son éditeur associé.

Pour en savoir plus, consultez Icons.

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`
		saisie 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. Il est utile de comprendre comment la représentation graphique d'un bloc correspond à cet arbre lorsque vous écrivez du code pour manipuler des blocs de manière programmatique. Par exemple, un bloc controls_for :

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'
      ],
    },
  ]
}