체크박스 필드

체크박스 필드는 문자열을 값으로, 문자열을 텍스트로 저장합니다. 값은 'TRUE' 또는 'FALSE'이고 텍스트는 'true' 또는 'false'입니다.

체크박스 필드

'checkbox:' 라벨이 있는 블록과 체크표시가 있는 체크박스 필드

접힌 블록의 체크박스 필드

접힌 후의 동일한 블록 'variable: true' 라벨이 있고 접혀 있음을 나타내는 들쭉날쭉한 오른쪽 가장자리가 있습니다.

생성

JSON

{
  "type": "example_checkbox",
  "message0": "checkbox: %1",
  "args0": [
    {
      "type": "field_checkbox",
      "name": "FIELDNAME",
      "checked": true
    }
  ]
}

자바스크립트

Blockly.Blocks['example_checkbox'] = {
  init: function() {
    this.appendDummyInput()
        .appendField('checkbox:')
        .appendField(new Blockly.FieldCheckbox(true), 'FIELDNAME');
  }
};

체크박스 생성자는 선택적 값과 선택적 유효성 검사기를 사용합니다. 선택적 값은 'TRUE', 'FALSE' 또는 불리언이어야 합니다. 그렇지 않으면 false로 기본 설정됩니다.

직렬화

JSON

체크박스 필드의 JSON은 다음과 같습니다.

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

여기서 FIELDNAME은 체크박스 필드를 참조하는 문자열이고 값은 필드에 적용할 값입니다. 값은 불리언이어야 합니다.

XML

체크박스 필드의 XML은 다음과 같습니다.

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

또는

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

name 속성에 체크박스 필드를 참조하는 문자열이 포함되고 내부 텍스트가 필드에 적용할 값인 경우 내부 텍스트 값은 생성자 값과 동일한 규칙을 따릅니다.

역직렬화 및 재직렬화 후 모든 내부 텍스트 값이 대문자 ('TRUE' 또는 'FALSE')로 표시됩니다. 이는 작업공간을 비교할 때 유용할 수 있습니다.

맞춤설정

체크표시 문자

Blockly.FieldCheckbox.CHECK_CHAR 속성을 사용하여 체크표시의 모양을 변경할 수 있습니다. 값은 유니코드 문자를 포함하는 문자열이어야 합니다.

체크 대신 하트가 있는 체크박스 필드

CHECK_CHAR 속성의 기본값은 \u2713 또는 ✓입니다.

전역 속성이므로 설정하면 모든 체크박스 필드가 수정됩니다.

체크박스 유효성 검사기 만들기

체크박스 필드의 값은 'TRUE' 또는 'FALSE'이므로 검사기는 이러한 값 (즉, 문자열)을 허용하고 'TRUE', 'FALSE', null 또는 undefined을 반환해야 합니다.

다음은 체크박스가 선택되었는지 여부에 따라 텍스트 입력 필드를 숨기거나 표시하는 유효성 검사기의 예입니다.

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

유효성 검사기가 있는 체크박스 필드

체크박스가 선택되는 모습을 보여주는 애니메이션 GIF 체크박스를 선택하면 텍스트 필드가 표시됩니다.