연구 설문조사: Blockly 사용 경험을 알려주세요

이 페이지는 Cloud Translation API를 통해 번역되었습니다.

드롭다운 필드

드롭다운 필드에는 문자열을 값으로, 문자열을 텍스트로 저장합니다. 이 값은 텍스트 및 Blockly가 다른 언어로 전환될 때 번역되지 않습니다. 텍스트는 사용자에게 표시될 사람이 읽을 수 있는 문자열입니다.

드롭다운 필드

편집기가 열려 있는 드롭다운 필드

접힌 블록의 드롭다운 입력란

생성

드롭다운 생성자는 메뉴 생성기와 선택적 검사기를 사용할 수 있습니다. 메뉴 생성기에는 기본적으로 옵션 배열이며 각 옵션은 사람이 읽을 수 있는 부분, 그리고 언어 중립적인 문자열이 있습니다.

간단한 텍스트 드롭다운

텍스트 옵션 2개가 있는 드롭다운 열기

JSON

{
  "type": "example_dropdown",
  "message0": "drop down: %1",
  "args0": [
    {
      "type": "field_dropdown",
      "name": "FIELDNAME",
      "options": [
        [ "first item", "ITEM1" ],
        [ "second item", "ITEM2" ]
      ]
    }
  ]
}

자바스크립트

Blockly.Blocks['example_dropdown'] = {
  init: function() {
    this.appendDummyInput()
        .appendField('drop down:')
        .appendField(new Blockly.FieldDropdown([
            ['first item', 'ITEM1'],
            ['second item', 'ITEM2']
        ]), 'FIELDNAME');
  }
};

사람이 읽을 수 있는 정보를 언어 중립 키와 별도로 유지 드롭다운 메뉴의 설정을 언어 간에 유지할 수 있습니다. 대상 예를 들어 블록의 영어 버전은 [['left', 'LEFT'], ['right', 'RIGHT]]를 정의할 수 있는 반면, 동일한 블록의 독일어 버전은 [['links', 'LEFT'], ['rechts', 'RIGHT]]를 정의할 수 있습니다.

이미지 드롭다운

드롭다운 메뉴의 옵션은 텍스트가 아닌 이미지일 수도 있습니다. 이미지 객체는 src, width, height, alt 속성으로 지정됩니다.

드롭다운에 텍스트 옵션과 이미지 옵션이 혼합될 수 있지만 현재 개별 옵션은 이미지와 텍스트를 모두 포함할 수 없습니다.

이미지와 텍스트가 포함된 드롭다운 필드

JSON

{
  "type": "image_dropdown",
  "message0": "flag %1",
  "args0": [
    {
      "type": "field_dropdown",
      "name": "FLAG",
      "options": [
        ["none", "NONE"],
        [{"src": "canada.png", "width": 50, "height": 25, "alt": "Canada"}, "CANADA"],
        [{"src": "usa.png", "width": 50, "height": 25, "alt": "USA"}, "USA"],
        [{"src": "mexico.png", "width": 50, "height": 25, "alt": "Mexico"}, "MEXICO"]
      ]
    }
  ]
}

자바스크립트

Blockly.Blocks['image_dropdown'] = {
  init: function() {
    var input = this.appendDummyInput()
        .appendField('flag');
    var options = [
        ['none', 'NONE'],
        [{'src': 'canada.png', 'width': 50, 'height': 25, 'alt': 'Canada'}, 'CANADA'],
        [{'src': 'usa.png', 'width': 50, 'height': 25, 'alt': 'USA'}, 'USA'],
        [{'src': 'mexico.png', 'width': 50, 'height': 25, 'alt': 'Mexico'}, 'MEXICO']
    ];
    input.appendField(new Blockly.FieldDropdown(options), 'FLAG');
  }
};

동적 드롭다운

요일이 포함된 드롭다운 필드

JSON

{
  "type": "dynamic_dropdown",
  "message0": "day %1",
  "args0": [
    {
      "type": "input_dummy",
      "name": "INPUT"
    }
  ],
  "extensions": ["dynamic_menu_extension"]
}

Blockly.Extensions.register('dynamic_menu_extension',
  function() {
    this.getInput('INPUT')
      .appendField(new Blockly.FieldDropdown(
        function() {
          var options = [];
          var now = Date.now();
          for(var i = 0; i < 7; i++) {
            var dateString = String(new Date(now)).substring(0, 3);
            options.push([dateString, dateString.toUpperCase()]);
            now += 24 * 60 * 60 * 1000;
          }
          return options;
        }), 'DAY');
  });

이 작업은 JSON 확장자가 아닙니다.

자바스크립트

Blockly.Blocks['dynamic_dropdown'] = {
  init: function() {
    var input = this.appendDummyInput()
      .appendField('day')
      .appendField(new Blockly.FieldDropdown(
        this.generateOptions), 'DAY');
  },

  generateOptions: function() {
    var options = [];
    var now = Date.now();
    for(var i = 0; i < 7; i++) {
      var dateString = String(new Date(now)).substring(0, 3);
      options.push([dateString, dateString.toUpperCase()]);
      now += 24 * 60 * 60 * 1000;
    }
    return options;
  }
};

드롭다운은 정적 목록 대신 함수와 함께 제공될 수도 있습니다. 옵션을 사용하면 옵션을 동적으로 설정할 수 있습니다. 함수는 동일한 [human-readable-value, language-neutral-key]의 옵션 배열 정적 옵션으로 사용할 수 있습니다. 드롭다운을 클릭할 때마다 함수가 옵션이 다시 계산됩니다

직렬화

JSON

드롭다운 필드의 JSON은 다음과 같습니다.

{
  "fields": {
    "FIELDNAME": "LANGUAGE-NEUTRAL-KEY"
  }
}

여기서 FIELDNAME는 드롭다운 필드를 참조하는 문자열입니다. 값은 필드에 적용할 값입니다. 값은 언어 중립적인 옵션 키입니다.

XML

드롭다운 필드의 XML은 다음과 같습니다.

<field name="FIELDNAME">LANGUAGE-NEUTRAL-KEY</field>

여기서 필드의 name 속성에 드롭다운을 참조하는 문자열이 포함되어 있습니다. 내부 텍스트는 필드에 적용할 값입니다. 내부 텍스트는 유효한 언어 중립적인 옵션 키여야 합니다.

맞춤설정

드롭다운 화살표

Blockly.FieldDropdown.ARROW_CHAR 속성을 사용하여 드롭다운 화살표를 나타내는 유니코드 문자입니다.

맞춤 화살표가 있는 드롭다운 필드

ARROW_CHAR 속성의 기본값은 Android에서 \u25BC (▼) 및 \u25BE (▾)입니다. 없습니다.

전역 속성이므로 설정되면 모든 드롭다운 필드가 수정됩니다.

메뉴 높이

Blockly.FieldDropdown.MAX_MENU_HEIGHT_VH 속성을 사용하여 메뉴의 최대 높이입니다. 표시 영역의 백분율로 정의됩니다. 높이, 창은 표시 영역입니다.

MAX_MENU_HEIGHT_VH 속성의 기본값은 0.45입니다.

전역 속성이므로 설정되면 모든 드롭다운 필드가 수정됩니다.

접두사/접미사 일치

모든 드롭다운 메뉴 옵션이 공통 접두어 또는 접미어를 공유하는 경우 이러한 단어는 자동으로 제외되고 정적 텍스트로 삽입됩니다. 예를 들어, 다음은 동일한 블록을 만드는 두 가지 방법입니다 (먼저 두 번째는 서픽스 일치):

서픽스 일치 제외:

JSON

{
  "type": "dropdown_no_matching",
  "message0": "hello %1",
  "args0": [
    {
      "type": "field_dropdown",
      "name": "MODE",
      "options": [
        ["world", "WORLD"],
        ["computer", "CPU"]
      ]
    }
  ]
}

자바스크립트

Blockly.Blocks['dropdown_no_matching'] = {
  init: function() {
    var options = [
      ['world', 'WORLD'],
      ['computer', 'CPU']
    ];

    this.appendDummyInput()
        .appendField('hello')
        .appendField(new Blockly.FieldDropdown(options), 'MODE');
  }
};

서픽스 일치 사용:

JSON

{
  "type": "dropdown_with_matching",
  "message0": "%1",
  "args0": [
    {
      "type": "field_dropdown",
      "name": "MODE",
      "options": [
        ["hello world", "WORLD"],
        ["hello computer", "CPU"]
      ]
    }
  ]
}

자바스크립트

Blockly.Blocks['dropdown_with_matching'] = {
  init: function() {
    var options = [
      ['hello world', 'WORLD'],
      ['hello computer', 'CPU']
    ];

    this.appendDummyInput()
        .appendField(new Blockly.FieldDropdown(options), 'MODE');
  }
};

드롭다운 필드

이 접근 방식의 한 가지 장점은 사용할 수 있습니다. 이전 코드에는 'hello', 'world', 'computer', 수정된 코드에는 문자열 'hello world' 및 'hello computer'입니다. 번역사는 기존보다 훨씬 쉽게 구문을 번역할 수 있습니다 사용하지 않습니다.

이 접근 방식의 또 다른 장점은 있습니다. 'world hello' 및 'computer hello'를 사용한 언어를 상상해 보세요. 서픽스 일치 알고리즘이 공통 'hello'를 감지하여 표시합니다. 선택합니다.

하지만 접두사/접미사 일치가 실패하는 경우도 있습니다. 다음과 같은 몇 가지 경우가 있습니다. 두 단어는 항상 함께 있어야 하며 접두사를 제외해서는 안 됩니다. 예를 들어 'drive red car' 및 'drive red truck'는 틀림없이 'drive red'가 아닌 'drive'를 제외했습니다. 유니코드와 공백 '\u00A0'를 일반 공백 대신 사용하여 접두사/접미사 일치자. 따라서 위의 예는 'drive red\u00A0car' 및 'drive red\u00A0truck'

접두사/접미사 일치가 실패하는 또 다른 위치는 개별 단어를 공백으로 구분합니다. 중국어가 좋은 예입니다. 문자열 '訪問中國'는 'visit China'를 의미합니다. 단어 사이의 공백이 없다는 점에 유의하세요. 총칭하여 마지막 두 문자 ('中國')는 'China'의 단어입니다. 분할하면 각각 'centre'와 'country'을 의미합니다. 만들기 중국어, 영어, 일본어와 같은 언어에서는 접두사/접미사 일치 작업이 줄바꿈이 있어야 할 곳에 공백을 삽입하기만 하면 됩니다. 예를 들면 '訪問中國' 및 '訪問美國'는 "visit [China/USA]"의 결과를 얻는 반면 '訪問中國' 및 '訪問美國'은 "visit [centre/beautiful] country"를 초래합니다.

드롭다운 검사기 만들기

드롭다운 필드의 값은 언어 중립적인 문자열이므로 모든 검사기는 문자열을 수락하고 사용 가능한 옵션, null 또는 undefined입니다.

검사기가 다른 값을 반환하는 경우, Blockly의 동작이 정의되지 않은 것이고 프로그램이 다운될 수 있습니다.

예를 들어 세 개의 옵션과 다음과 같이 합니다.

validate: function(newValue) {
  this.getSourceBlock().updateConnections(newValue);
  return newValue;
},

init: function() {
  var options = [
   ['has neither', 'NEITHER'],
   ['has statement', 'STATEMENT'],
   ['has value', 'VALUE'],
  ];

  this.appendDummyInput()
  // Pass the field constructor the options list, the validator, and the name.
      .appendField(new Blockly.FieldDropdown(options, this.validate), 'MODE');
}

validate는 항상 전달된 값을 반환하지만 도우미를 호출합니다. 드롭다운을 기반으로 입력을 추가하거나 삭제하는 함수 updateConnection 값:

updateConnections: function(newValue) {
  this.removeInput('STATEMENT', /* no error */ true);
  this.removeInput('VALUE', /* no error */ true);
  if (newValue == 'STATEMENT') {
    this.appendStatementInput('STATEMENT');
  } else if (newValue == 'VALUE') {
    this.appendValueInput('VALUE');
  }
}