Vous pouvez configurer (prédéfinir) l'état des blocs dans une boîte à outils. Par exemple, vous pouvez définir un champ sur une valeur par défaut ou connecter deux blocs. Vous pouvez également créer des blocs fantômes, qui servent de valeurs par défaut pour les blocs enfants.
Exemples
Voici quelques exemples de blocs prédéfinis.
Bloquer avec une valeur de champ prédéfinie
Voici un bloc math_number dont le champ affiche le nombre 42 au lieu de la valeur par défaut 0 :
Voici une boîte à outils qui définit ce champ :
JSON
{
"kind": "flyoutToolbox",
"contents": [
{
"kind": "block",
"type": "math_number",
"fields": {
"NUM": 42
}
},
]
}
XML
<xml id="toolbox" style="display: none">
<block type="math_number">
<field name="NUM">42</field>
</block>
</xml>
Blocs préconnectés
Voici un bloc controls_for auquel sont connectés trois blocs math_number :
Voici une boîte à outils qui préconnecte ces blocs :
JSON
{
"kind": "flyoutToolbox",
"contents": [
{
"kind": "block",
"type": "controls_for",
"inputs": {
"FROM": {
"block": {
"type": "math_number",
"fields": {
"NUM": 1
}
}
},
"TO": {
"block": {
"type": "math_number",
"fields": {
"NUM": 10
}
}
},
"BY": {
"block": {
"type": "math_number",
"fields": {
"NUM": 1
}
}
},
}
},
]
}
XML
<xml id="toolbox" style="display: none">
<block type="controls_for">
<value name="FROM">
<block type="math_number">
<field name="NUM">1</field>
</block>
</value>
<value name="TO">
<block type="math_number">
<field name="NUM">10</field>
</block>
</value>
<value name="BY">
<block type="math_number">
<field name="NUM">1</field>
</block>
</value>
</block>
</xml>
Blocs désactivés
Les blocs désactivés ne peuvent pas être déplacés depuis la boîte à outils. Les blocs peuvent être désactivés individuellement à l'aide de la propriété facultative disabled.
JSON
{
"kind": "flyoutToolbox",
"contents": [
{
"kind": "block",
"type":"math_number"
},
{
"kind": "block",
"type": "math_arithmetic"
},
{
"kind": "block",
"type": "math_single",
"disabled": "true"
}
]
}
XML
<xml id="toolbox" style="display: none">
<block type="math_number"></block>
<block type="math_arithmetic"></block>
<block type="math_single" disabled="true"></block>
</xml>
Vous pouvez également désactiver ou activer un bloc de manière programmatique à l'aide de setDisabledReason.
Configurer vos blocages
Vous pouvez configurer un bloc dans une boîte à outils de la même manière que dans un espace de travail. Par exemple, vous pouvez définir des valeurs de champ, connecter des blocs à des entrées de valeur ou d'instruction, ajouter des commentaires, et réduire ou désactiver des blocs. Cela est possible, car les boîtes à outils utilisent le même code pour configurer les blocs que les espaces de travail utilisent pour les sérialiser.
Cela signifie également qu'il est facile de créer une configuration de bloc. Il vous suffit de charger votre bloc dans un espace de travail, de le configurer comme vous le souhaitez et de le sérialiser en exécutant le code suivant dans la console.
JSON
console.log(Blockly.serialization.workspaces.save(Blockly.getMainWorkspace()));
XML
console.log(Blockly.Xml.workspaceToDom(Blockly.getMainWorkspace()));
Vous pouvez ensuite copier le code de configuration et le coller dans votre boîte à outils. Veillez à supprimer les propriétés x, y et id, qui sont ignorées par la boîte à outils.
Champs de variables
Les champs de variables peuvent nécessiter une spécification différente lorsqu'ils se trouvent dans une boîte à outils par rapport à lorsqu'ils sont sérialisés.
En particulier, lorsque les champs de variables sont normalement sérialisés au format JSON, ils ne contiennent que l'ID de la variable qu'ils représentent, car le nom et le type de la variable sont sérialisés séparément. Toutefois, les boîtes à outils ne contiennent pas ces informations. Vous devez donc les inclure directement dans le champ de variable.
{
"kind": "flyoutToolbox",
"content": [
{
"kind": "block",
"type": "controls_for",
"fields": {
"VAR": {
"name": "index",
"type": "Number"
}
}
}
]
}
Blocs d'ombre
Les blocs fantômes sont des blocs d'espace réservé qui remplissent plusieurs fonctions :
- Elles indiquent les valeurs par défaut de leur bloc parent.
- Ils permettent aux utilisateurs de saisir des valeurs directement sans avoir à récupérer un bloc de nombre ou de chaîne.
- Contrairement à un bloc normal, ils sont remplacés si l'utilisateur dépose un bloc sur eux.
- Ils informent l'utilisateur du type de valeur attendu.
Pour créer un bloc fantôme, utilisez la propriété shadow (JSON) ou la balise <shadow> (XML) au lieu de la propriété block ou de la balise <block>. Par exemple, voici un bloc math_arithmetic auquel sont connectés deux blocs fantômes math_number :
Voici une boîte à outils qui utilise ces blocs fantômes :
JSON
{
"kind": "flyoutToolbox",
"contents": [
{
"kind": "block",
"type": "math_arithmetic",
"fields": {
"OP": "ADD"
},
"inputs": {
"A": {
"shadow": {
"type": "math_number",
"fields": {
"NUM": 1
}
}
},
"B": {
"shadow": {
"type": "math_number",
"fields": {
"NUM": 1
}
}
}
}
},
]
}
XML
<xml id="toolbox" style="display: none">
<block type="math_arithmetic">
<field name="OP">ADD</field>
<value name="A">
<shadow type="math_number">
<field name="NUM">1</field>
</shadow>
</value>
<value name="B">
<shadow type="math_number">
<field name="NUM">1</field>
</shadow>
</value>
</block>
</xml>