맞춤 차단 추가

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

자바스크립트

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 입력)을 코드 문자열로 렌더링한 다음 더 큰 표현식으로 연결합니다.

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