Поля флажков

Поле флажка хранит строку в качестве своего значения и строку в качестве своего текста. Его значение может быть 'TRUE' или 'FALSE' , а его текст — 'true' или 'false' .

Поле флажка

Блок с надписью «checkbox:» и полем флажка с галочкой.

Поле флажка в свернутом блоке

Тот же блок после свёртывания. У него есть метка «переменная: true» и рваный правый край, показывающий, что он свёрнут.

Создание

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');
  }
};

Конструктор флажка принимает необязательное значение и необязательный валидатор . Необязательное значение должно быть 'TRUE' , 'FALSE' или логическим значением, в противном случае по умолчанию будет установлено значение false .

Сериализация

JSON

JSON для поля флажка выглядит так:

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

Где FIELDNAME — строка, ссылающаяся на поле флажка, а значение — значение, применяемое к полю. Значение должно быть логическим.

XML

XML для поля флажка выглядит так:

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

или

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

Где атрибут name содержит строку, ссылающуюся на поле флажка, а внутренний текст — это значение, которое нужно применить к полю. Значение внутреннего текста подчиняется тем же правилам, что и значение конструктора.

Обратите внимание, что после десериализации и ресериализации все внутренние текстовые значения будут заглавными буквами ( 'TRUE' или 'FALSE' ). Это иногда важно при сравнении рабочих пространств.

Настройка

Символ галочки

Свойство Blockly.FieldCheckbox.CHECK_CHAR позволяет изменить внешний вид галочки. Значение должно быть строкой, содержащей символ Unicode.

Поле для флажка с сердечком вместо галочки

Свойство CHECK_CHAR по умолчанию имеет значение \u2713 или ✓.

Это глобальное свойство, поэтому при его установке будут изменены все поля флажков.

Создание валидатора флажков

Значение поля флажка — 'TRUE' или 'FALSE' , поэтому валидатор должен принять эти значения (т. е. строку) и вернуть 'TRUE' , 'FALSE' , null или undefined .

Вот пример валидатора, который скрывает или показывает поле ввода текста в зависимости от того, отмечен ли флажок:

  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');
    }
  }

Поле-флажок с валидатором

Анимированный GIF-файл, демонстрирующий установленный флажок. При установке флажка отображается текстовое поле.