맞춤 블록 개요

Blockly에는 수학 함수에서 루프 구조에 이르기까지 사전 정의된 수많은 블록이 제공됩니다. 그러나 대부분의 애플리케이션은 도메인에 맞춤 블록을 정의하고 구현해야 합니다. 예를 들어 그리기 애플리케이션에는 선과 원을 그리기 위한 블록이 필요할 수 있고 로봇 애플리케이션에는 팔을 움직이고 발톱을 조작하기 위한 블록이 필요할 수 있습니다.

새 유형의 블록을 정의하고 사용하려면 다음 세 가지가 필요합니다.

  • 블록 정의: 블록 유형의 모양과 느낌은 물론 특정 동작을 정의합니다.
  • 블록 코드 생성기: 이 유형의 블록에 관한 코드 문자열을 생성합니다. 타겟 언어가 JavaScript가 아니더라도 항상 JavaScript로 작성됩니다.
  • 도구 상자 참조: 사용자가 작업공간에 추가할 수 있도록 도구 상자의 블록 유형에 대한 참조입니다.

블록 정의

블록 정의는 텍스트, 필드, 연결, 색상과 같은 블록의 모양과 느낌을 정의합니다. 블록별 이벤트 핸들러와 같은 블록별 동작을 정의할 수도 있습니다. 예를 들어 다음 블록을 보세요.

`string_length` 블록

다음과 같이 JSON 또는 JavaScript에서 정의할 수 있습니다.

JSON

Blockly.common.defineBlocksWithJsonArray([{
  "type": "string_length",
  "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');
   }
};

블록 정의 및 작동 방식에 관한 자세한 내용은 블록 정의란 무엇인가요?를 참고하세요.

블록 코드 생성기

블록을 코드로 변환하려면 생성하려는 언어마다 별도의 생성기 함수가 필요합니다. 예를 들어 다음은 JavaScript를 생성하는 생성기입니다.

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

생성기 함수는 처리 중인 블록과 언어 생성기를 허용합니다. 입력에 연결된 블록 (예: 예시의 VALUE 입력) 및 필드의 코드를 생성한 후 결과 문자열을 더 큰 표현식으로 연결합니다.

자세한 내용은 블록 코드 생성기를 참고하세요.

도구 상자 참조

블록 유형을 정의한 후 유형 이름을 사용하여 도구 상자에서 참조합니다.

JSON

var toolbox = {
     "kind": "categoryToolbox",
     "name": "Text"
     "contents": [
       {
         "kind": "block",
         "type": "string_length"
       },
     ]
   };

XML

<xml id="toolbox" style="display: none"> WHY IS THERE DISPLAY: NONE HERE?
   <category name="Text">
     <block type="string_length"></block>
   </category>
   ...
</xml>

자세한 내용은 플라이아웃 도구 상자 정의 또는 카테고리 도구 상자 정의를 참고하세요.