Campos da caixa de seleção

Um campo de caixa de seleção armazena uma string como valor e uma string como texto. O valor é 'TRUE' ou 'FALSE', e o texto é 'true' ou 'false'.

Campo de caixa de seleção

Um bloco com o rótulo "checkbox:" e um campo de caixa de seleção com uma marca de seleção.

Campo de caixa de seleção em um bloco recolhido

O mesmo bloco depois de ser recolhido. Ele tem o rótulo "variable: true" e uma borda direita irregular para mostrar que está recolhido.

Criação

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

O construtor de caixa de seleção recebe um valor opcional e um validador opcional. O valor opcional precisa ser 'TRUE', 'FALSE' ou um booleano. Caso contrário, o padrão será false.

Serialização

JSON

O JSON de um campo de caixa de seleção é assim:

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

Em que FIELDNAME é uma string que faz referência a um campo de caixa de seleção, e o valor é o valor a ser aplicado ao campo. O valor precisa ser booleano.

XML

O XML de um campo de caixa de seleção é assim:

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

ou

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

Em que o atributo name contém uma string que faz referência a um campo de caixa de seleção e o texto interno é o valor a ser aplicado ao campo. O valor do texto interno segue as mesmas regras do valor do construtor.

Depois de serem desserializados e resserializados, todos os valores de texto interno estarão em maiúsculas ('TRUE' ou 'FALSE'). Isso às vezes é importante ao comparar espaços de trabalho.

Personalização

Caractere de marca de seleção

A propriedade Blockly.FieldCheckbox.CHECK_CHAR pode ser usada para mudar a aparência da marca de seleção. O valor precisa ser uma string que contenha um caractere Unicode.

Campo de caixa de seleção com um coração em vez de uma marca de seleção

A propriedade CHECK_CHAR assume como padrão \u2713 ou ✓.

Essa é uma propriedade global, então ela vai modificar todos os campos de caixa de seleção quando definida.

Como criar um validador de caixa de seleção

O valor de um campo de caixa de seleção é 'TRUE' ou 'FALSE'. Portanto, um validador precisa aceitar esses valores (ou seja, uma string) e retornar 'TRUE', 'FALSE', null ou undefined.

Confira um exemplo de um validador que oculta ou mostra um campo de entrada de texto com base na marcação da caixa de seleção:

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

Campo de caixa de seleção com um validador

Um GIF animado que mostra uma caixa de seleção sendo marcada. Quando a caixa de seleção está marcada, um campo de texto é exibido.