Kästchenfelder

In einem Kontrollkästchenfeld wird ein String als Wert und ein String als Text gespeichert. Der Wert ist entweder 'TRUE' oder 'FALSE' und der Text ist entweder 'true' oder 'false'.

Kästchenfeld

Ein Block mit dem Label „checkbox:“ und ein Kästchen mit einem Häkchen.

Kästchenfeld in minimiertem Block

Derselbe Block nach dem Minimieren. Es hat das Label „variable: true“ und einen gezackten rechten Rand, um anzuzeigen, dass es minimiert ist.

Erstellung

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

Der Kontrollkästchen-Konstruktor akzeptiert einen optionalen Wert und einen optionalen Validator. Der optionale Wert sollte entweder 'TRUE', 'FALSE' oder ein boolescher Wert sein. Andernfalls wird standardmäßig false verwendet.

Serialisierung

JSON

Der JSON-Code für ein Kontrollkästchenfeld sieht so aus:

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

Dabei ist FIELDNAME ein String, der auf ein Kontrollkästchenfeld verweist, und der Wert ist der Wert, der auf das Feld angewendet werden soll. Der Wert muss ein boolescher Wert sein.

XML

Das XML für ein Kontrollkästchenfeld sieht so aus:

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

oder

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

Dabei enthält das Attribut name einen String, der auf ein Kontrollkästchenfeld verweist, und der innere Text ist der Wert, der auf das Feld angewendet werden soll. Der innere Textwert folgt denselben Regeln wie der Konstruktorwert.

Nach der Deserialisierung und Reserialisierung werden alle inneren Textwerte in Großbuchstaben dargestellt ('TRUE' oder 'FALSE'). Das ist manchmal wichtig, wenn Sie Arbeitsbereiche vergleichen.

Anpassung

Häkchen

Mit der Property Blockly.FieldCheckbox.CHECK_CHAR können Sie das Aussehen des Häkchens ändern. Der Wert sollte ein String mit einem Unicode-Zeichen sein.

Kästchen mit Herz statt Häkchen

Das Attribut CHECK_CHAR ist standardmäßig auf \u2713 oder ✓ gesetzt.

Dies ist eine globale Eigenschaft. Wenn sie festgelegt ist, werden alle Kontrollkästchenfelder geändert.

Checkbox-Validierung erstellen

Der Wert eines Kontrollkästchenfelds ist entweder 'TRUE' oder 'FALSE'. Ein Validator sollte diese Werte (d. h. einen String) akzeptieren und 'TRUE', 'FALSE', null oder undefined zurückgeben.

Hier ist ein Beispiel für einen Validator, der ein Texteingabefeld ein- oder ausblendet, je nachdem, ob das Kästchen angeklickt ist:

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

Kästchenfeld mit einem Validator

Ein animiertes GIF, auf dem ein Kästchen angeklickt wird. Wenn das Kästchen angeklickt ist, wird ein Textfeld angezeigt.