JSON 및 JavaScript

Blockly에는 블록을 정의하는 두 가지 방법이 있습니다. 키-값 쌍을 사용하는 JSON 객체와 Blockly의 API를 호출하는 JavaScript 함수입니다. JSON 형식은 현지화를 단순화하고 읽고 쓰기가 더 쉽기 때문에 선호됩니다. 그러나 변형자나 검사기와 같은 고급 기능을 직접 정의하는 데는 사용할 수 없습니다. 이러한 함수는 일반적으로 확장 프로그램으로 JavaScript로 작성해야 합니다.

핵심 용어: 'JSON' 객체는 사실 일반 JavaScript 객체입니다. 값을 JSON으로 직렬화해야 하므로 JSON 객체라고 합니다. 이 용어는 (a) Blockly API에 표시되고 (b) 블록을 정의하는 두 가지 방법을 구분하는 편리한 방법이기 때문에 사용됩니다.

JSON 또는 JavaScript 사용

이 블록은 다음을 실행합니다.

다음과 같이 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은 init 함수를 사용하여 각 JSON 객체를 블록 정의 객체로 변환합니다. 이러한 객체를 Blockly.Blocks에 저장합니다.

자바스크립트

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

블록 정의 객체는 블록 객체에 혼합되므로 키워드 this는 생성 중인 실제 블록을 나타냅니다.

두 메서드 모두 블록 정의 객체가 블록 유형 이름 (string_length)의 키로 Blockly.Blocks에 저장됩니다. 블록 정의 객체에는 블록의 도형을 정의하는 단일 메서드 (init)가 있습니다.

JSON과 JavaScript 혼합

JSON 형식은 주로 블록의 디자인을 정의하는 것을 지원합니다. 함수를 정의해야 하는 검사기 및 변수와 같은 일부 기능은 직접 정의할 수 없습니다. 이 문제를 해결하려면 블록을 최대한 JSON으로 정의하고 나머지는 JavaScript를 사용하세요.

다음 예에서는 jsonInit를 사용하여 JSON 객체를 로드하고 JavaScript API를 사용하여 동적 도움말을 정의하는 init 함수로 블록 정의를 만듭니다.

자바스크립트

// Define the block structure in JSON.
var mathChangeJson = {
  "message0": "change %1 by %2",
  "args0": [
    {"type": "field_variable", "name": "VAR", "variable": "item", "variableTypes": [""]},
    {"type": "input_value", "name": "DELTA", "check": "Number"}
  ],
  "previousStatement": null,
  "nextStatement": null,
  "colour": 230
};

Blockly.Blocks['math_change'] = {
  init: function() {
    // Use jsonInit to load the JSON block structure.
    this.jsonInit(mathChangeJson);

    // Use JavaScript to define a tooltip function.
    // Assign 'this' to a variable for use in the tooltip closure below.
    var thisBlock = this;
    this.setTooltip(function() {
      return 'Add a number to variable "%1".'.replace('%1',
          thisBlock.getFieldValue('VAR'));
    });
  }
};

Block definition API

이 섹션에서는 맞춤 블록을 정의하는 데 사용되는 객체와 함수를 요약합니다.

Blockly.Blocks

Blockly.Blocks는 블록 정의를 저장하는 객체입니다. 키는 블록 유형 이름이고 값은 블록 정의 객체입니다. JavaScript로 블록을 정의할 때 Blockly.Blocks를 사용합니다.

Blockly.Blocks['my_block'] = {
  init: function() {/* ... */},
  onchange: function() {/* ... */},
  // ...
}

Blockly.Blocks가 블록을 저장한다고 가정하고 다음과 같은 작업을 시도하는 것이 일반적인 오류입니다. Blockly.Blocks는 블록이 아닌 블록 정의를 저장하므로 이 작업은 실패합니다.

// Fails with "Blockly.Blocks.my_block.setColour is not a function".
Blockly.Blocks['my_block'].setColour(150);

defineBlocksWithJsonArray

defineBlocksWithJsonArray는 JSON 객체 배열을 수락하고, 이를 사용하여 블록 정의를 만들고, Blockly.Blocks에 추가합니다.

Blockly.common.defineBlocksWithJsonArray([
  {
    type: 'my_block1',
    // ...
  }
  {
    type: 'my_block3',
    // ...
  }
  {
    type: 'my_block2',
    // ...
  }
]);

createBlockDefinitionsFromJsonArray 및 defineBlocks

createBlockDefinitionsFromJsonArray는 JSON 객체 배열을 허용하고 블록 유형 이름을 블록 정의에 매핑하는 객체를 반환합니다. 이는 일반적으로 Blockly.Blocks에 블록 정의를 추가하는 defineBlocks와 함께 사용됩니다.

const myBlockDefinitions = Blockly.common.createBlockDefinitionsFromJsonArray([
  {
    type: 'my_block1',
    // ...
  }
  {
    type: 'my_block3',
    // ...
  }
  {
    type: 'my_block2',
    // ...
  }
]);
Blockly.common.defineBlocks(myBlockDefinitions);

Block.jsonInit

jsonInit는 JSON 객체를 허용하고 Block에서 상응하는 메서드를 호출합니다. 예를 들어 키-값 쌍이 colour: 150인 JSON 객체는 this.setColour(150) 호출을 초래합니다. init 함수에서 jsonInit를 사용하여 JSON 객체를 로드합니다.

var myJson = {
  // ...
};

Blockly.Blocks['my_block'] = {
  init: function() {
    this.jsonInit(myJson);
    // The rest of the init function.
  }
};