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 dans 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 la case à cocher accepte une valeur facultative et un validateur facultatif. La valeur facultative doit être 'TRUE', 'FALSE' ou une valeur booléenne. Sinon, la valeur par défaut sera 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 où 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 intérieur 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 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 modifiera tous les champs de cases à cocher lorsqu'elle sera 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 masque ou affiche 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.