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

Bloc avec le libellé "checkbox:" et un champ de case à cocher avec une coche.

Champ de case à cocher sur un bloc réduit

Le même bloc après avoir été réduit. Il comporte le libellé "variable: true" et un bord droit dentelé 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 case à cocher accepte une valeur facultative et un validateur facultatif . La valeur facultative doit être soit 'TRUE', 'FALSE' ou une valeur booléenne. Sinon, elle sera définie par défaut sur 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 celle à appliquer au champ. La valeur doit être une valeur 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>

Où l'attribut name contient une chaîne faisant référence à un champ de case à cocher, et 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ées et resérialisées, toutes les valeurs de texte interne seront en majuscules ('TRUE' ou 'FALSE'). Cela est parfois important lors de la comparaison des espaces de travail.

Personnalisation

Caractère de coche

La propriété Blockly.FieldCheckbox.CHECK_CHAR peut être utilisée pour 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 programme de validation doit donc accepter ces valeurs (c'est-à-dire une chaîne) et renvoyer 'TRUE', 'FALSE', null, ou undefined.

Voici un exemple de validateur qui affiche ou masque un champ de saisie de texte selon que la case à cocher est cochée ou non :

  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 une case à cocher cochée. Lorsqu&#39;elle est cochée, un champ de texte s&#39;affiche.