블록 정의란 무엇인가요?

블록 정의는 맞춤 블록을 정의하는 객체입니다. 예를 들어 블록의 모양과 느낌(텍스트, 필드, 연결, 색상 등)과 동작 (블록 수준 이벤트 핸들러 등)을 정의합니다.

예를 들어 다음 블록을 보세요.

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

defineBlocksWithJsonArray는 JSON 객체에서 블록 정의를 만듭니다.

자바스크립트

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를 사용하면 블록 정의를 직접 만듭니다.

블록 정의 작동 방식

블록 정의는 함수 값 속성이 포함된 믹스인입니다. 새 블록이 인스턴스화되면 이러한 속성이 새로 생성된 블록 객체에 복사됩니다. Blockly는 이러한 함수를 호출하여 맞춤 동작을 호출합니다.

정의 함수가 블록 객체에 혼합되기 때문입니다.

  • 정의 함수의 this 키워드는 블록 객체를 나타냅니다. 즉, Block (또는 BlockSvg) 클래스의 공개 메서드 및 속성에 액세스하는 데 사용할 수 있습니다.

Blockly는 블록을 맞춤설정하는 데 사용할 수 있는 소수의 함수를 정의합니다. 가장 일반적인 것은 init입니다. Blockly에서 블록을 초기화하기 위해 호출하며 블록의 모양과 느낌을 정의하는 데 사용됩니다. 전체 목록은 Block 및 BlockSvg 클래스의 함수 값 속성을 참고하세요. 이러한 속성은 블록 정의가 구현할 인터페이스를 효과적으로 형성합니다. 모두 선택사항입니다.

블록 정의에는 커스텀 함수도 있을 수 있지만 Blockly는 이를 직접 호출하지 않습니다. 대신 다른 함수를 구현하는 데 사용할 수 있습니다. 예를 들어 블록 수준 이벤트 핸들러 (Block.onchange 속성)는 서로 다른 이벤트를 서로 다른 맞춤 함수에 위임할 수 있습니다.

블록 정의를 만드는 방법

블록 정의를 만드는 방법에는 여러 가지가 있습니다.

  • Blockly 개발자 도구를 사용하여 블록의 디자인과 분위기를 정의합니다. 생성된 JSON 또는 JavaScript를 코드에 복사하고 필요에 따라 맞춤 코드를 추가합니다. 자세한 내용은 Blockly 개발자 도구를 참고하세요.
  • 유사한 블록을 찾아 정의 사항을 복사한 후 필요에 따라 수정합니다. 자세한 내용은 기존 정의 수정을 참고하세요.
  • 블록 정의를 직접 작성합니다. 자세한 내용은 JSON 및 JavaScript를 참고하세요.