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 “casilla de verificación” y un campo de casilla de verificación con una marca de verificación.

Campo de casilla de verificación en un bloque colapsado

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

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á de forma predeterminada en false.

Serialización

JSON

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

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

En el que 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 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>

En el que 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 de 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 el aspecto 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 casilla de verificación cuando se establezca.

Cómo crear un validador de casilla 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 mostrar '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

GIF animado que muestra cómo se marca una casilla de verificación. Cuando se marca la casilla de verificación, se muestra un campo de texto.