맞춤 차단 추가

Blockly는 여러 표준 블록을 정의하지만 대부분의 애플리케이션은 몇 개의 도메인 관련 블록을 정의하고 구현해야 합니다.

블록은 다음 세 가지 구성요소로 이루어집니다.

  • 블록 정의 객체: 텍스트, 색상, 입력란, 연결 등 블록의 모양과 동작을 정의합니다.
  • 도구 상자 참조: 사용자가 작업공간에 추가할 수 있도록 도구 상자 XML의 블록 유형에 관한 참조입니다.
  • 생성기 함수: 이 블록의 코드 문자열을 생성합니다. 타겟 언어가 자바스크립트가 아닌 경우에도 항상 자바스크립트로 작성됩니다.

차단 정의

웹용 Blockly는 스크립트 파일을 통해 블록을 로드합니다. blocks/ 디렉터리에는 표준 블록의 이러한 예가 여러 개 포함되어 있습니다. 블록이 기존 카테고리에 맞지 않는다고 가정하고 새 JavaScript 파일을 만듭니다. 이 새 자바스크립트 파일은 편집기의 HTML 파일에 있는 <script ...> 태그 목록에 포함해야 합니다.

일반적인 블록 정의는 다음과 같습니다.

JSON

Blockly.Blocks['string_length'] = {
  init: function() {
    this.jsonInit({
      "message0": 'length of %1',
      "args0": [
        {
          "type": "input_value",
          "name": "VALUE",
          "check": "String"
        }
      ],
      "output": "Number",
      "colour": 160,
      "tooltip": "Returns number of letters in the provided text.",
      "helpUrl": "http://www.w3schools.com/jsref/jsref_length_string.asp"
    });
  }
};

JavaScript

Blockly.Blocks['string_length'] = {
  init: function() {
    this.appendValueInput('VALUE')
        .setCheck('String')
        .appendField('length of');
    this.setOutput(true, 'Number');
    this.setColour(160);
    this.setTooltip('Returns number of letters in the provided text.');
    this.setHelpUrl('http://www.w3schools.com/jsref/jsref_length_string.asp');
  }
};

  • string_length: 블록의 유형 이름입니다. 모든 블록은 동일한 네임스페이스를 공유하므로 카테고리 (이 경우 string) 뒤에 블록의 함수 (이 경우 length)로 구성된 이름을 사용하는 것이 좋습니다.

  • init: 이 함수는 블록의 디자인을 정의합니다.

이는 다음 블록을 정의합니다.

`string_length` 블록.

블록 정의에 관한 자세한 내용은 블록 정의를 참고하세요.

JSON 배열

JSON 블록 정의 배열을 사용하여 한 번에 여러 블록을 정의할 수 있습니다.

JSON

Blockly.defineBlocksWithJsonArray([
  // Block for colour picker.
  {
    "type": "colour_picker",
    "message0": "%1",
    "args0": [
      {
        "type": "field_colour",
        "name": "COLOUR",
        "colour": "#ff0000"
      }
    ],
    "output": "Colour",
    "helpUrl": "%{BKY_COLOUR_PICKER_HELPURL}",
    "style": "colour_blocks",
    "tooltip": "%{BKY_COLOUR_PICKER_TOOLTIP}",
    "extensions": ["parent_tooltip_when_inline"]
  },
  // Block for random colour.
  {
    "type": "colour_random",
    "message0": "%{BKY_COLOUR_RANDOM_TITLE}",
    "output": "Colour",
    "helpUrl": "%{BKY_COLOUR_RANDOM_HELPURL}",
    "style": "colour_blocks",
    "tooltip": "%{BKY_COLOUR_RANDOM_TOOLTIP}"
  }
]);

도구 상자 참조 추가

정의가 끝나면 유형 이름을 사용하여 블록을 도구 상자로 참조합니다.

<xml id="toolbox" style="display: none">
  <category name="Text">
    <block type="string_length"></block>
  </category>
  ...
</xml>

자세한 내용은 도구 상자 가이드를 참고하세요.

블록 코드 생성기 추가

마지막으로 블록을 코드로 변환하려면 블록을 생성기 함수와 페어링합니다. 생성기는 원하는 출력 언어에 따라 다르지만 표준 생성기는 일반적으로 다음 형식을 사용합니다.

javascriptGenerator.forBlock['text_length'] = function(block, generator) {
  // String or array length.
  var argument0 = generator.valueToCode(block, 'VALUE', Order.FUNCTION_CALL) || '\'\'';
  return [argument0 + '.length', Order.MEMBER];
};

생성기 함수는 처리할 블록의 참조를 사용합니다. 입력 (위의 VALUE 입력)을 코드 문자열로 렌더링하고 더 큰 표현식으로 연결합니다.

→ 블록 코드 생성기에 대해 자세히 알아보기