Campi della casella di controllo

Un campo casella di controllo memorizza una stringa come valore e una stringa come testo. Il suo valore è 'TRUE' o 'FALSE' e il suo testo è 'true' o 'false'.

Campo casella di controllo

Un blocco con l'etichetta "checkbox:" e un campo casella di controllo con un segno di spunta.

Campo casella di controllo nel blocco compresso

Lo stesso blocco dopo essere stato compresso. Ha l'etichetta "variable: true" e un bordo destro frastagliato per indicare che è compresso.

Creazione

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

Il costruttore di caselle di controllo accetta un valore facoltativo e un validatore facoltativo. Il valore facoltativo deve essere 'TRUE', 'FALSE' o un valore booleano, altrimenti il valore predefinito sarà false.

Serializzazione

JSON

Il JSON per un campo casella di controllo è simile al seguente:

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

dove FIELDNAME è una stringa che fa riferimento a un campo casella di controllo e il valore è il valore da applicare al campo. Il valore deve essere un valore booleano.

XML

Il codice XML per un campo casella di controllo è il seguente:

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

o

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

Dove l'attributo name contiene una stringa che fa riferimento a un campo casella di controllo e il testo interno è il valore da applicare al campo. Il valore del testo interno segue le stesse regole del valore del costruttore.

Tieni presente che dopo la deserializzazione e la riserializzazione tutti i valori di testo interni saranno in maiuscolo ('TRUE' o 'FALSE'). A volte questo è importante quando si confrontano gli spazi di lavoro.

Personalizzazione

Carattere segno di spunta

La proprietà Blockly.FieldCheckbox.CHECK_CHAR può essere utilizzata per modificare l'aspetto del segno di spunta. Il valore deve essere una stringa contenente un carattere Unicode.

Campo casella di controllo con cuore anziché segno di spunta

Per impostazione predefinita, la proprietà CHECK_CHAR è impostata su \u2713 o ✓.

Si tratta di una proprietà globale, quindi modificherà tutti i campi delle caselle di controllo quando viene impostata.

Creazione di un validatore di caselle di controllo

Il valore di un campo casella di controllo è 'TRUE' o 'FALSE', quindi uno strumento di convalida deve accettare questi valori (ovvero una stringa) e restituire 'TRUE', 'FALSE', null o undefined.

Ecco un esempio di un validatore che nasconde o mostra un campo di input di testo in base alla casella di controllo selezionata:

  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 della casella di controllo con uno strumento di convalida

Una GIF animata che mostra una casella di controllo selezionata. Quando la casella di controllo è selezionata, viene visualizzato un campo di testo.