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

Campo de casilla de verificación en el bloque 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 recibe un valor y un validator opcionales. El valor opcional debe ser 'TRUE', 'FALSE' o un booleano; de lo contrario, el valor predeterminado será false.

Serialización

JSON

El JSON de un campo de casilla de verificación tiene el siguiente aspecto:

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

En el ejemplo anterior, FIELDNAME es una string que hace referencia a un campo de casilla de verificación y el valor es el valor que se debe aplicar al campo. El valor debe ser booleano.

XML

El XML de un campo de casilla de verificación tiene el siguiente aspecto:

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

o

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

Cuando 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 debe aplicar al campo. El valor de texto interno sigue las mismas reglas que el valor del constructor.

Ten en cuenta que, después de deserializar y volver a serializar, todos los valores de texto internos estarán en mayúsculas ('TRUE' o 'FALSE'). A veces, esto es importante cuando se comparan lugares 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 string que contenga un carácter Unicode.

Campo de casilla de verificación con corazón en lugar de marcar

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 configure.

Crea 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 string) y mostrar 'TRUE', 'FALSE', null o undefined.

A continuación, se incluye un ejemplo de un validador que oculta o muestra un campo de entrada de texto en función de 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