이 페이지는 Cloud Translation API를 통해 번역되었습니다.

블록 정의

블록 정의는 텍스트, 색상, 도형, 연결할 수 있는 다른 블록을 포함하여 블록의 모양과 동작을 설명합니다.

JSON 형식과 JavaScript API 비교

Blockly에는 JSON 객체와 JavaScript 함수라는 두 가지 방법으로 블록을 정의할 수 있습니다. JSON 형식은 단어 순서가 다른 언어를 개발할 때 현지화 프로세스를 간소화하도록 설계되었습니다. JSON 형식은 블록을 정의하는 데 선호되는 방법입니다.

그러나 JSON 형식은 변형자 또는 검사기와 같은 고급 기능을 직접 정의할 수 없습니다. 이는 일반적으로 확장 프로그램으로 자바스크립트로 작성해야 합니다.

Blockly의 원래 JavaScript 구현을 사용하는 앱은 아래의 다양한 JavaScript 예와 같이 하위 수준의 Blockly API 함수 호출에 직접 블록 정의를 작성할 수도 있습니다.

JSON

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

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

init 함수는 블록의 도형을 만듭니다. 이 함수의 컨텍스트에서 키워드 this는 생성 중인 실제 블록입니다.

두 예 모두 동일한 'string_length' 블록을 로드합니다.

웹에서 JSON 형식은 initJson 함수를 사용하여 로드됩니다. 이를 통해 Blockly 웹페이지에서 두 형식을 혼합할 수도 있습니다. 가능하면 JSON으로 블록을 정의하고 JSON이 지원하지 않는 블록 정의 부분에만 자바스크립트를 사용하는 것이 좋습니다.

다음은 주로 JSON을 사용하여 정의되지만 동적 도움말을 제공하기 위해 JavaScript API를 사용하여 확장된 블록의 예입니다.

JavaScript

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() {
    this.jsonInit(mathChangeJson);
    // 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'));
    });
  }
};

블록 색상

블록의 기본 색상은 JSON colour 속성인 block.setColour(..) 함수로 정의하거나 테마를 사용하고 블록 스타일을 정의하여 정의합니다.

JSON

{
  // ...,
  "colour": 160,
}

JavaScript

init: function() {
  // ...
  this.setColour(160);
}

자세한 내용은 블록 색상 가이드를 참고하세요.

명령문 연결

사용자는 nextStatement 및 previousStatement 커넥터를 사용하여 블록 시퀀스를 만들 수 있습니다. Blockly의 표준 레이아웃에서는 이러한 연결이 상단과 하단에 있으며 블록이 수직으로 쌓여 있습니다.

이전 커넥터가 있는 블록은 출력 커넥터를 보유할 수 없으며 그 반대의 경우도 마찬가지입니다. 문 블록이라는 용어는 값 출력이 없는 블록을 의미합니다. 문 블록에는 일반적으로 이전 연결과 다음 연결이 모두 있습니다.

nextStatement 및 previousStatement 연결은 입력할 수 있지만 표준 블록에서는 이 기능을 활용하지 않습니다.

다음 연결

다른 문을 그 아래에 쌓을 수 있도록 블록 하단에 점을 만듭니다. 다음 연결은 있지만 이전 연결은 없는 블록은 일반적으로 이벤트를 나타내며 모자로 렌더링하도록 구성할 수 있습니다.

JSON

미입력:

{
  ...,
  "nextStatement": null,
}

유형 (드물게 사용):

{
  "nextStatement": "Action",
  ...
}

JavaScript

미입력:

this.setNextStatement(true);  // false implies no next connector, the default

유형 (드물게 사용):

this.setNextStatement(true, 'Action');

이전 연결

블록 상단에 노치를 생성하여 문의 스택으로 연결할 수 있도록 합니다.

이전 연결이 있는 블록은 출력 연결을 가질 수 없습니다.

JSON

미입력:

{
  ...,
  "previousStatement": null,
}

유형 (드물게 사용):

{
  "previousStatement": "Action",
  ...
}

JavaScript

미입력:

this.setPreviousStatement(true);  // false implies no previous connector, the default

유형 (드물게 사용):

this.setPreviousStatement(true, 'Action');

출력 차단

블록에는 선행 가장자리에 수직 직소 커넥터로 표시되는 단일 출력이 있을 수 있습니다. 출력이 값 입력에 연결됩니다. 출력이 있는 블록을 일반적으로 값 블록이라고 합니다.

JSON

미입력:

{
  // ...,
  "output": null,
}

유형:

{
  // ...,
  "output": "Number",
}

JavaScript

미입력:

init: function() {
  // ...
  this.setOutput(true);
}

유형:

init: function() {
  // ...
  this.setOutput(true, 'Number');
}

출력 커넥터가 있는 블록에는 이전 명령문 노치를 포함할 수 없습니다.

입력 차단

블록에는 하나 이상의 입력이 있으며, 각 입력에는 필드의 시퀀스가 있으며 연결로 끝날 수 있습니다. 기본 제공 입력에는 여러 유형이 있습니다.

값 입력: 값 블록의 출력 연결에 연결합니다. math_arithmetic 블록 (더하기, 빼기)은 2개의 값 입력이 있는 블록의 예입니다.
구문 입력: 문 블록의 이전 연결에 연결합니다. while 루프의 중첩 섹션은 명령문 입력의 예입니다.
더미 입력: 블록 연결이 없습니다. 외부 값 입력을 사용하도록 블록이 구성된 경우 줄바꿈처럼 작동합니다.
끝 행 입력: 블록 연결이 없으며 항상 줄바꿈처럼 작동합니다.

맞춤 입력을 만들어 맞춤 렌더링을 지원할 수도 있습니다.

JSON 형식과 JavaScript API는 약간 다른 모델을 사용하여 입력을 설명합니다.

JSON의 입력 및 필드

JSON으로 정의된 블록은 보간된 메시지 문자열 ( message0, message1, ...)의 시퀀스로 구조화됩니다. 여기서 각 보간 토큰(%1, %2, ...)은 일치하는 JSON argsN 배열의 필드 또는 입력 끝 (입력 커넥터가 메시지 내에서 렌더링하는 위치)입니다. 이 형식은 다국어화를 쉽게 하기 위한 것입니다.

JSON

{
  "message0": "set %1 to %2",
  "args0": [
    {
      "type": "field_variable",
      "name": "VAR",
      "variable": "item",
      "variableTypes": [""]
    },
    {
      "type": "input_value",
      "name": "VALUE"
    }
  ]
}

보간 토큰은 args0 배열과 완전히 일치해야 하며 중복 및 생략이 없어야 합니다. 토큰은 순서와 상관없이 존재할 수 있으므로 다양한 언어가 블록의 레이아웃을 변경할 수 있습니다.

보간 토큰의 양쪽에 있는 텍스트는 공백으로 잘립니다. % 문자를 사용하는 텍스트 (예: 백분율을 나타내는 경우)는 보간 토큰으로 해석되지 않도록 %%를 사용해야 합니다.

인수의 순서와 인수 유형이 블록의 모양을 정의합니다. 이러한 문자열 중 하나를 변경하면 블록의 레이아웃이 완전히 변경될 수 있습니다. 이는 영어와 단어 순서가 다른 언어에서 특히 중요합니다. 위 예에서 사용된 "set %1 to %2"를 "put %2 in %1"로 바꿔야 하는 가상 언어가 있다고 가정해 보겠습니다. 이 문자열 하나를 변경하고 나머지 JSON은 그대로 두면 다음과 같은 블록이 생성됩니다.

블록으로 필드 순서를 자동으로 변경하고 더미 입력을 만들며 외부에서 내부 입력으로 전환했습니다.

또한 Blockly는 메시지 문자열의 모든 줄바꿈 문자 (\n)를 끝 행 입력으로 자동 바꿉니다.

JSON

{
  "message0": "set %1\nto %2",
  "args0": [
    {
      "type": "field_variable",
      "name": "VAR",
      "variable": "item",
      "variableTypes": [""]
    },
    {
      "type": "input_value",
      "name": "VALUE"
    }
  ]
}

인수

각 메시지 문자열은 동일한 숫자의 args 배열과 페어링됩니다. 예를 들어 message0는 args0와 함께 이동합니다. 보간 토큰(%1, %2, ...)은 args 배열의 항목을 참조합니다. 모든 객체에는 type 문자열이 있습니다. 나머지 매개변수는 유형에 따라 다릅니다.

필드:
입력:
- input_value
- input_statement
- input_dummy
- input_end_row

자체 맞춤 필드와 맞춤 입력을 정의하고 인수로 전달할 수도 있습니다.

모든 객체에 alt 필드가 있을 수도 있습니다. Blockly가 객체의 type를 인식하지 못하는 경우 alt 객체가 대신 사용됩니다. 예를 들어 field_time라는 새 필드가 Blockly에 추가되면 이 필드를 사용하는 블록에서 alt를 사용하여 Blockly의 이전 버전에 관한 field_input 대체를 정의할 수 있습니다.

JSON

{
  "message0": "sound alarm at %1",
  "args0": [
    {
      "type": "field_time",
      "name": "TEMPO",
      "hour": 9,
      "minutes": 0,
      "alt":
        {
          "type": "field_input",
          "name": "TEMPOTEXT",
          "text": "9:00"
        }
    }
  ]
}

alt 객체에는 자체 alt 객체가 있을 수 있으므로 체이닝이 가능합니다. 궁극적으로 alt 객체를 시도한 후 Blockly가 args0 배열에 객체를 만들 수 없는 경우 해당 객체를 건너뜁니다.

message 문자열이 입력에 포함되지 않은 텍스트 또는 필드로 끝나면 더미 입력이 블록 끝에 자동으로 추가됩니다. 따라서 블록의 마지막 입력이 더미 입력인 경우 args 배열에서 생략할 수 있으며 message에 보간할 필요가 없습니다. 꼬리 더미 입력을 자동으로 추가하면 번역사가 나머지 JSON을 수정하지 않고도 message를 변경할 수 있습니다. 이 페이지 앞부분의 "set %1 to %2" (더미 입력 없음) 및 "put %2 in %1" (더미 입력 추가됨) 예시를 참고하세요.

`implicitAlign0`

드물지만 자동으로 생성된 후행 더미 입력을 "RIGHT" 또는 "CENTRE"에 정렬해야 합니다. 지정하지 않을 경우 기본값은 "LEFT"입니다.

아래 예에서 message0는 "send email to %1 subject %2 secure %3"이며, Blockly는 세 번째 행에 더미 입력을 자동으로 추가합니다. implicitAlign0를 "RIGHT"로 설정하면 이 행이 오른쪽에 배치됩니다. 이 정렬은 메시지에서 줄바꿈 문자('\n')를 대체하는 끝 행 입력을 포함하여 JSON 블록 정의에 명시적으로 정의되지 않은 모든 입력에 적용됩니다. implicitAlign0과 동일한 동작을 갖는 지원 중단된 속성 lastDummyAlign0도 있습니다.

RTL (아랍어 및 히브리어)의 블록을 설계할 때 왼쪽과 오른쪽이 반전됩니다. 따라서 "RIGHT"는 필드를 왼쪽으로 정렬합니다.

`message1`, `args1`, `implicitAlign1`

일부 블록은 자연스럽게 두 개 이상의 개별 부분으로 나뉩니다. 두 행이 있는 다음 반복 블록을 살펴보겠습니다.

이 블록이 단일 메시지로 설명되었다면 message0 속성은 "repeat %1 times %2 do %3"가 됩니다. 이 문자열은 번역사에게 어색하며 %2 대체의 의미를 설명하기 어렵습니다. 일부 언어에서는 %2 더미 입력을 사용하지 못할 수도 있습니다. 그리고 두 번째 행의 텍스트를 공유하려는 블록이 여러 개 있을 수 있습니다. 더 나은 접근 방식은 JSON에서 2개 이상의 메시지와 인수 속성을 사용하는 것입니다.

JSON

{
  "type": "controls_repeat_ext",
  "message0": "repeat %1 times",
  "args0": [
    {"type": "input_value", "name": "TIMES", "check": "Number"}
  ],
  "message1": "do %1",
  "args1": [
    {"type": "input_statement", "name": "DO"}
  ],
  "previousStatement": null,
  "nextStatement": null,
  "colour": 120
}

원하는 수의 message, args, implicitAlign 속성을 JSON 형식으로 정의할 수 있으며 0부터 순차적으로 증가합니다. Block Factory는 메시지를 여러 부분으로 분할할 수 없지만 수동으로 분할하는 것은 간단합니다.

JavaScript의 입력 및 필드

JavaScript API에는 각 입력 유형에 맞는 append 메서드가 포함되어 있습니다.

JavaScript

this.appendEndRowInput()
    .appendField('for each')
    .appendField('item')
    .appendField(new Blockly.FieldVariable());
this.appendValueInput('LIST')
    .setCheck('Array')
    .setAlign(Blockly.inputs.Align.RIGHT)
    .appendField('in list');
this.appendStatementInput('DO')
    .appendField('do');
this.appendDummyInput()
    .appendField('end');

각 추가 메서드는 코드 생성기에서 사용하는 식별자 문자열을 받을 수 있습니다. 더미 및 마지막 행 입력은 참조가 거의 필요하지 않으며 식별자는 일반적으로 설정되지 않은 상태로 둡니다.

JavaScript API에는 맞춤 입력을 추가하는 일반 appendInput 메서드도 포함되어 있습니다. 이 경우 식별자를 맞춤 입력의 생성자에 직접 전달해야 합니다.

JavaScript

this.appendInput(new MyCustomInput('INPUT_NAME'))
    .appendField('an example label')

모든 appendInput 메서드 (일반 및 비일반)는 입력 객체를 반환하므로 메서드 체이닝을 사용하여 추가로 구성할 수 있습니다. 입력을 구성하는 데 사용되는 기본 제공 메서드에는 세 가지가 있습니다.

`setCheck`

JavaScript

input.setCheck('Number');

이 선택적 함수는 연결된 입력의 유형 확인에 사용됩니다. null 인수(기본값)가 지정된 경우 이 입력이 임의의 블록에 연결될 수 있습니다. 자세한 내용은 유형 확인을 참고하세요.

`setAlign`

JavaScript

input.setAlign(Blockly.inputs.Align.RIGHT);

이 선택적 함수는 필드를 정렬하는 데 사용됩니다 (아래 참고). 이 함수에 인수로 전달할 수 있는 세 가지 자체 설명적 값은 Blockly.inputs.Align.LEFT, Blockly.inputs.Align.RIGHT, Blockly.inputs.Align.CENTER입니다.

RTL (아랍어 및 히브리어)의 블록을 설계할 때 왼쪽과 오른쪽이 반전됩니다. 따라서 Blockly.inputs.Align.RIGHT는 필드를 왼쪽으로 정렬합니다.

`appendField`

입력이 생성되어 appendInput가 있는 블록에 추가되면 필요에 따라 원하는 수의 필드를 입력에 추가할 수 있습니다. 이러한 필드는 각 입력의 목적을 설명하는 라벨로 자주 사용됩니다.

JavaScript

input.appendField('hello');

가장 간단한 필드 요소는 텍스트입니다. Blockly의 규칙은 고유 이름 (예: Google, SQL)을 제외하고 모두 소문자 텍스트를 사용하는 것입니다.

입력 행에는 필드 요소를 원하는 수만큼 포함할 수 있습니다. 여러 appendField 호출을 함께 연결하여 여러 필드를 동일한 입력 행에 효율적으로 추가할 수 있습니다.

JavaScript

input.appendField('hello')
     .appendField(new Blockly.FieldLabel('Neil', 'person'));

appendField('hello') 호출은 실제로 명시적인 FieldLabel 생성자인 appendField(new Blockly.FieldLabel('hello'))을 사용하는 바로가기입니다. CSS 규칙을 사용하여 텍스트의 스타일을 지정할 수 있도록 클래스 이름을 지정할 때만 생성자를 사용합니다.

인라인 및 외부

블록 입력은 외부 또는 내부로 렌더링할 수 있습니다.

블록 정의는 입력이 인라인인지 여부를 제어하는 불리언 값(선택사항)을 지정할 수 있습니다. false이면 모든 값 입력이 외부 (예: 왼쪽 블록)가 됩니다. true인 경우 모든 값 입력은 인라인이 됩니다 (예: 위의 오른쪽 블록).

JSON

{
  // ...,
  "inputsInline": true
}

JavaScript

init: function() {
  // ...
  this.setInputsInline(true);
}

정의되지 않은 경우 Blockly는 몇 가지 휴리스틱을 사용해 가장 적합한 모드를 추측합니다. Blockly가 올바른 선택을 했다고 가정하면 언어 번역에 따라 모드가 자동으로 달라질 수 있으므로 이 필드를 정의되지 않은 상태로 두는 것이 좋습니다. 이 페이지 앞부분에서 "set %1 to %2" (외부 입력) 및 "put %2 in %1" (인라인 입력)의 JSON 예시를 참고하세요.

블록에 숫자와 같은 작은 입력이 있을 가능성이 있는 경우 인라인 입력을 사용합니다. collapse 구성이 사용 설정된 경우 사용자는 컨텍스트 메뉴를 통해 이 옵션을 전환할 수 있습니다 (도구 상자에 카테고리가 있으면 기본값은 true임).

필드

필드는 블록 내 대부분의 UI 요소를 정의합니다. 여기에는 문자열 라벨, 이미지, 리터럴 데이터(예: 문자열 및 숫자)의 입력이 포함됩니다. 가장 간단한 예는 field_input를 사용하여 사용자가 숫자를 입력할 수 있게 해주는 math_number 블록입니다.

필드는 appendField를 사용하여 블록에 추가됩니다.

Blockly는 텍스트 입력, 색상 선택 도구, 이미지를 포함한 여러 기본 필드를 제공합니다. 필드를 직접 만들 수도 있습니다.

→ 기본 제공 필드에 대해 자세히 알아보기

→ 맞춤 필드 만들기에 대해 자세히 알아보세요.

아이콘

아이콘은 블록에 관한 '메타' 정보를 표시하는 블록의 UI 요소를 정의합니다.

아이콘은 addIcon을 사용하여 블록에 추가됩니다.

Blockly는 댓글 아이콘 및 경고 아이콘을 비롯한 여러 기본 아이콘을 제공합니다. 나만의 아이콘을 만들 수도 있습니다.

→ 맞춤 아이콘 만들기에 대해 자세히 알아보세요.

도움말

도움말은 사용자가 블록 위로 마우스를 가져가면 즉각적인 도움말을 제공합니다. 텍스트가 길면 자동으로 줄바꿈됩니다.

JSON

{
  // ...,
  "tooltip": "Tooltip text."
}

JavaScript

init: function() {
  this.setTooltip("Tooltip text.");
}

JavaScript API에서는 도움말을 정적 문자열이 아닌 함수로 정의할 수도 있습니다. 이를 통해 동적 도움말이 가능합니다. 선택된 드롭다운 옵션에 따라 변경되는 도움말의 예는 math_arithmetic를 참고하세요.

JavaScript

Blockly.Blocks['math_arithmetic'] = {
  init: function() {
    // ...

    // Assign 'this' to a variable for use in the tooltip closure below.
    var thisBlock = this;
    this.setTooltip(function() {
      var mode = thisBlock.getFieldValue('OP');
      var TOOLTIPS = {
        'ADD': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_ADD,
        'MINUS': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_MINUS,
        'MULTIPLY': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_MULTIPLY,
        'DIVIDE': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_DIVIDE,
        'POWER': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_POWER
      };
      return TOOLTIPS[mode];
    });
  }
};

블록은 JavaScript API를 사용하여 도움말 문자열을 반환하는 정적 문자열 대신 함수를 지정할 수 있습니다. 이렇게 하면 동적 도움말을 사용할 수 있습니다. 예를 보려면 math_arithmetic를 참고하세요.

맞춤설정

맞춤 렌더링 함수를 제공하여 도움말의 모양을 맞춤설정할 수도 있습니다. 두 매개변수를 허용하는 함수를 만듭니다.

첫째, 콘텐츠를 렌더링할 <div> 요소입니다.
두 번째는 마우스를 가져가면 표시되는 도움말이 표시됩니다

함수 본문에서 div에 원하는 콘텐츠를 렌더링할 수 있습니다. 마우스를 가져가면 블록에 정의된 도움말 문자열을 가져오려면 Blockly.Tooltip.getTooltipOfObject(element);을 호출하면 됩니다. 여기서 element는 위의 두 번째 매개변수입니다.

마지막으로, Blockly가 적절한 시점에 호출할 수 있도록 이 함수를 등록합니다.

Blockly.Tooltip.setCustomTooltip(yourFnHere);

예시는 커스텀 도움말 데모를 참조하세요.

도움말 URL

차단에는 연결된 도움말 페이지가 있을 수 있습니다. 이 기능은 Blockly for Web 사용자가 블록을 마우스 오른쪽 버튼으로 클릭하고 컨텍스트 메뉴에서 'Help'를 선택하여 사용할 수 있습니다. 이 값이 null이면 메뉴가 비활성화됩니다.

JSON

{
  // ...,
  "helpUrl": "https://en.wikipedia.org/wiki/For_loop"
}

JavaScript

init: function() {
  // ...
  this.setHelpUrl('https://en.wikipedia.org/wiki/For_loop');
}

JavaScript API를 사용하여 블록은 URL 문자열을 반환하는 정적 문자열 대신 함수를 지정할 수 있으므로 동적 도움말이 가능합니다.

리스너 및 검사기 변경

블록에는 작업공간이 변경될 때 호출되는 변경 리스너 함수 (블록과 관련 없는 함수 포함)가 있을 수 있습니다. 주로 블록의 경고 텍스트나 작업공간 외부에서 유사한 사용자 알림을 설정하는 데 사용됩니다.

함수는 함수와 함께 setOnChange를 호출하여 추가되며 모든 플랫폼에서 사용하려는 경우 init 또는 JSON 확장 프로그램을 통해 수행할 수 있습니다.

JSON

{
  // ...,
  "extensions":["warning_on_change"],
}

Blockly.Extensions.register('warning_on_change', function() {
  // Example validation upon block change:
  this.setOnChange(function(changeEvent) {
    if (this.getInput('NUM').connection.targetBlock()) {
      this.setWarningText(null);
    } else {
      this.setWarningText('Must have an input block.');
    }
  });
});

JavaScript

Blockly.Blocks['block_type'] = {
  init: function() {
    // Example validation upon block change:
    this.setOnChange(function(changeEvent) {
      if (this.getInput('NUM').connection.targetBlock()) {
        this.setWarningText(null);
      } else {
        this.setWarningText('Must have an input block.');
      }
    });
  }
}

시스템이 함수를 호출하여 변경 이벤트를 전달합니다. 함수 내에서 this는 블록 인스턴스를 참조합니다.

이 함수는 변경사항이 발생할 때 호출되므로 사용하는 경우 개발자는 리스너가 빠르게 실행되는지 확인해야 합니다. 리스너에 하위로 전파되거나 루프백될 수 있는 작업공간 변경사항도 주의해야 합니다.

예를 보려면 controls_flow_statements, logic_compare, procedures_ifreturn 블록을 참고하세요.

수정 가능한 필드에는 입력 유효성 검사 및 부작용을 위한 자체 이벤트 리스너가 있습니다.

변형자

변형 도구를 사용하면 사용자가 대화상자를 열어 구성요소를 추가, 삭제 또는 재정렬할 때 고급 블록의 모양을 변경할 수 있습니다. 변형자는 mutator 키를 사용하여 JSON을 통해 추가할 수 있습니다.

JSON

{
  // ...,
  "mutator":"if_else_mutator"
}

블록별 구성

블록 인스턴스에는 사용자에게 작동하는 방식을 구성하는 여러 가지 속성이 있습니다. 도메인의 특정 속성 (예: 정확히 1개의 '시작' 이벤트)을 반영하도록 작업공간을 제한하거나 사용자의 노력 (예: 튜토리얼)에 초점을 맞추는 데 사용할 수 있습니다.

삭제 가능 상태

block.setDeletable(false);

false로 설정하면 사용자가 차단을 삭제할 수 없습니다. 블록은 기본적으로 수정 가능한 작업공간에서 삭제 가능으로 설정됩니다.

모든 블록(삭제할 수 없는 블록 포함)은 프로그래매틱 방식으로 삭제할 수 있습니다.

block.dispose();

수정 가능한 상태

block.setEditable(false);

false로 설정하면 사용자가 블록의 필드(예: 드롭다운 및 텍스트 입력)를 변경할 수 없습니다. 블록은 기본적으로 수정 가능한 작업공간에서 수정할 수 있습니다.

이동 가능 상태

block.setMovable(false);

false로 설정하면 사용자가 블록을 직접 이동할 수 없습니다. 다른 블록의 하위 요소인 이동할 수 없는 블록은 상위 요소를 이동하면 상위 블록과 함께 이동하지만 블록에서 연결 해제될 수 없습니다. 블록은 기본적으로 수정 가능한 작업공간에서 이동할 수 있습니다.

블록 (이동할 수 없는 블록 포함)이 작업공간에 있으면 프로그래매틱 방식으로 이동할 수 있습니다.

block.moveBy(dx, dy)

작업공간에서 블록의 시작 위치는 기본적으로 (0, 0)입니다.

데이터 차단

this.data = '16dcb3a4-bd39-11e4-8dfc-aa07a5b093db';

데이터는 블록에 연결된 선택적 임의의 문자열입니다. 블록이 직렬화되면 데이터 문자열이 블록으로 직렬화됩니다. 여기에는 블록을 복제하거나 복사하여 붙여넣는 경우가 포함됩니다.

주로 블록을 외부 리소스와 연결하는 데 사용됩니다.

JSON으로 직렬화하면 데이터가 블록에 최상위 속성으로 저장됩니다.

{
  "type": "my_block",
  "data": "16dcb3a4-bd39-11e4-8dfc-aa07a5b093db",
  // etc..
}

XML (이전 아이스박스 직렬화 시스템)으로 직렬화되면 데이터 문자열은 블록 내의 <data></data> 태그에 저장됩니다.

<block type="my_block">
  <data>16dcb3a4-bd39-11e4-8dfc-aa07a5b093db</data>
  <!-- etc... -->
</block>

파기

블록에는 destroy 후크가 있으며 이 후크는 작업공간에서 삭제될 때 호출됩니다. 이는 더 이상 필요하지 않은 블록과 연결된 지원 데이터 모델/외부 리소스를 폐기하는 데 사용할 수 있습니다.

JSON

{
  // ...,
  "extensions":["destroy"],
}

Blockly.Extensions.registerMixin('destroy', {
  destroy: function() {
    this.myResource.dispose();
  }
});

JavaScript

Blockly.Blocks['block_type'] = {
  destroy: function() {
    this.myResource.dispose();
  }
}

destroy 메서드는 블록의 상위 요소가 삭제된 후 블록의 하위 요소나 필드가 삭제되기 전에 호출됩니다.

컨텍스트 메뉴

기본적으로 블록에는 사용자가 코멘트 추가 또는 블록 복제와 같은 작업을 할 수 있는 마우스 오른쪽 버튼 클릭 컨텍스트 메뉴가 있습니다.

다음을 수행하여 개별 블록의 컨텍스트 메뉴를 사용 중지할 수 있습니다.

block.contextMenu = false;

메뉴에 표시되는 옵션을 맞춤설정할 수도 있습니다. 모든 블록의 메뉴를 맞춤설정하려면 컨텍스트 메뉴 문서를 참고하세요. 개별 블록의 메뉴를 맞춤설정하려면 customContextMenu를 구현하면 됩니다. 이 함수는 메뉴 옵션 배열을 가져와 그 자리에서 수정합니다. 즉, 항목을 추가하고 삭제할 수도 있습니다.

각 메뉴 옵션은 세 가지 속성이 있는 객체입니다.

text는 표시 텍스트입니다.
enabled는 불리언입니다. 사용 중지하면 옵션이 회색 텍스트로 표시됩니다.
callback은 옵션을 클릭할 때 호출할 함수입니다.

블록 정의

JSON 형식과 JavaScript API 비교

JSON

JavaScript

JavaScript

블록 색상

JSON

JavaScript

명령문 연결

다음 연결

JSON

JavaScript

이전 연결

JSON

JavaScript

출력 차단

JSON

JavaScript

입력 차단

JSON의 입력 및 필드

JSON

JSON

인수

JSON

implicitAlign0

message1, args1, implicitAlign1

JSON

JavaScript의 입력 및 필드

JavaScript

JavaScript

setCheck

JavaScript

setAlign

JavaScript

appendField

JavaScript

JavaScript

인라인 및 외부

JSON

JavaScript

필드

아이콘

도움말

JSON

JavaScript

JavaScript

맞춤설정

도움말 URL

JSON

JavaScript

리스너 및 검사기 변경

JSON

JavaScript

변형자

JSON

블록별 구성

삭제 가능 상태

수정 가능한 상태

이동 가능 상태

데이터 차단

파기

JSON

JavaScript

컨텍스트 메뉴

`implicitAlign0`

`message1`, `args1`, `implicitAlign1`

`setCheck`

`setAlign`

`appendField`