Champs de cases à cocher

Un champ de case à cocher stocke une chaîne comme valeur et une chaîne comme texte. Sa valeur est 'TRUE' ou 'FALSE', et son texte est 'true' ou 'false'.

Champ de case à cocher

![Un bloc avec le libellé "case à cocher:" et un champ de case à cocher avec une coche.

Champ de case à cocher sur un bloc réduit

Même bloc après avoir été replié. Il porte le libellé "variable: true" et une bordure dentelée sur la droite pour indiquer qu'il est réduit.

Création

JSON

{
  "type": "example_checkbox",
  "message0": "checkbox: %1",
  "args0": [
    {
      "type": "field_checkbox",
      "name": "FIELDNAME",
      "checked": true
    }
  ]
}

JavaScript

Blockly.Blocks['example_checkbox'] = {
  init: function() {
    this.appendDummyInput()
        .appendField('checkbox:')
        .appendField(new Blockly.FieldCheckbox(true), 'FIELDNAME');
  }
};

Le constructeur de la case à cocher accepte une valeur facultative et un valideur facultatif. La valeur facultative doit être 'TRUE', 'FALSE' ou une valeur booléenne. Sinon, la valeur par défaut est false.

Sérialisation

JSON

Le code JSON d'un champ de case à cocher se présente comme suit:

{
  "fields": {
    "FIELDNAME": true
  }
}

Où FIELDNAME est une chaîne faisant référence à un champ de case à cocher, et la valeur est la valeur à appliquer au champ. La valeur doit être booléenne.

XML

Le code XML d'un champ de case à cocher se présente comme suit:

<field name="FIELDNAME">TRUE</field>

ou

<field name="FIELDNAME">true</field>

Lorsque l'attribut name contient une chaîne faisant référence à un champ de case à cocher, le texte interne est la valeur à appliquer au champ. La valeur du texte interne suit les mêmes règles que la valeur du constructeur.

Notez qu'après avoir été désérialisé et sérialisé, toutes les valeurs de texte interne seront en majuscules ('TRUE' ou 'FALSE'). Cela est parfois important lors de la comparaison d'espaces de travail.

Personnalisation

Caractère coche

La propriété Blockly.FieldCheckbox.CHECK_CHAR permet de modifier l'apparence de la coche. La valeur doit être une chaîne contenant un caractère Unicode.

Champ de case à cocher avec un cœur au lieu d&#39;une coche

La propriété CHECK_CHAR est définie par défaut sur '\u2713' ou ✓.

Il s'agit d'une propriété globale. Par conséquent, elle modifie tous les champs de case à cocher lorsqu'elle est définie.

Créer un validateur de case à cocher

La valeur d'un champ de case à cocher est 'TRUE' ou 'FALSE'. Un validateur doit donc accepter ces valeurs (c'est-à-dire une chaîne) et renvoyer 'TRUE', 'FALSE', null ou undefined.

Voici un exemple de valideur qui masque ou affiche un champ de saisie de texte en fonction de la case à cocher:

  validate: function(newValue) {
    var sourceBlock = this.getSourceBlock();
    sourceBlock.showTextField_ = newValue == 'TRUE';
    sourceBlock.updateTextField();

    return newValue;
  },

  updateTextField: function() {
    var input = this.getInput('DUMMY');
    if (this.showTextField_ && !this.getField('TEXT')) {
      input.appendField(new Blockly.FieldTextInput(), 'TEXT');
    } else if (!this.showTextField_ && this.getField('TEXT')) {
      input.removeField('TEXT');
    }
  }

Champ de case à cocher avec un validateur

GIF animé montrant la coche d&#39;une case. Lorsque la case est cochée, un champ de texte s&#39;affiche.