Campos de casillas de verificación

Un campo de casilla de verificación almacena una cadena como su valor y una cadena como su texto. Su valor es 'TRUE' o 'FALSE', y su texto es 'true' o 'false'.

Campo de casilla de verificación

Un bloque con la etiqueta “checkbox:” y un campo de casilla de verificación con una marca de verificación.

Campo de casilla de verificación en el bloque contraído

El mismo bloque después de contraerse. Tiene la etiqueta "variable: true" y un borde derecho irregular para mostrar que está contraído.

Creación

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

El constructor de la casilla de verificación toma un valor opcional y un validador opcional. El valor opcional debe ser 'TRUE', 'FALSE' o un valor booleano. De lo contrario, se establecerá el valor predeterminado false.

Serialización

JSON

El JSON de un campo de casilla de verificación se ve de la siguiente manera:

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

Aquí, FIELDNAME es una cadena que hace referencia a un campo de casilla de verificación, y el valor es el valor que se aplicará al campo. El valor debe ser un valor booleano.

XML

El XML de un campo de casilla de verificación se ve de la siguiente manera:

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

o

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

Donde el atributo name contiene una cadena que hace referencia a un campo de casilla de verificación y el texto interno es el valor que se aplicará al campo. El valor del texto interno sigue las mismas reglas que el valor del constructor.

Ten en cuenta que, después de la deserialización y la reserialización, todos los valores de texto interno estarán en mayúsculas ('TRUE' o 'FALSE'). Esto a veces es importante cuando se comparan espacios de trabajo.

Personalización

Carácter de marca de verificación

La propiedad Blockly.FieldCheckbox.CHECK_CHAR se puede usar para cambiar la apariencia de la marca de verificación. El valor debe ser una cadena que contenga un carácter Unicode.

Campo de casilla de verificación con un corazón en lugar de una marca de verificación

El valor predeterminado de la propiedad CHECK_CHAR es \u2713 o ✓.

Esta es una propiedad global, por lo que modificará todos los campos de casillas de verificación cuando se establezca.

Cómo crear un validador de casillas de verificación

El valor de un campo de casilla de verificación es 'TRUE' o 'FALSE', por lo que un validador debe aceptar esos valores (es decir, una cadena) y devolver 'TRUE', 'FALSE', null o undefined.

Este es un ejemplo de un validador que oculta o muestra un campo de entrada de texto según si la casilla de verificación está marcada:

  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 casilla de verificación con un validador

Un GIF animado que muestra una casilla de verificación marcada. Cuando la casilla de verificación está marcada, se muestra un campo de texto.