연구 설문조사: Blockly 사용 경험을 알려주세요

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

블록 정의

블록 정의는 텍스트, 색, 모양, 그리고 연결할 수 있는 다른 블록에 대한 의문을 해소해 줍니다.

JSON 형식과 JavaScript API 비교

Blockly는 JSON 객체와 JavaScript 함수라는 두 가지 방법으로 블록을 정의합니다. JSON 형식은 Google Cloud의 현지화 작업을 애플리케이션 개발 프로세스를 를 사용하는 것이 좋습니다. JSON 형식을 사용하는 것이 좋습니다. 메서드를 사용할 수 있습니다.

그러나 JSON 형식은 뮤테이터 또는 검사기처럼 작동합니다 일반적으로 다음과 같이 JavaScript로 작성해야 합니다. 확장 프로그램이 있습니다.

Blockly의 원래 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"
}]);

자바스크립트

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으로 블록을 정의하는 것을 선호하며 JavaScript를 할 수 있습니다.

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

자바스크립트

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,
}

자바스크립트

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

블록 색상 가이드를 참고하세요. 를 참조하세요.

문 연결

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

이전 커넥터가 있는 블록은 출력 커넥터 또는 그 반대로 되어 있습니다. 문 블록이라는 용어 값이 출력되지 않는 블록을 나타냅니다. 문 블록은 일반적으로 이전 연결 및 다음 연결이 모두 포함됩니다.

nextStatement 및 previousStatement 연결은 typed, 이 기능은 표준 차단에서는 활용되지 않습니다.

다음 연결

블록 하단에 점을 만들어 다른 문이 그 아래에 쌓여 있습니다. 다음 연결은 있지만 이전 연결이 없는 블록 일반적으로 이벤트를 나타내며, 모자

JSON

입력되지 않음:

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

유형 (드물게 사용):

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

자바스크립트

입력되지 않음:

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

입력 (드물게 사용):

this.setNextStatement(true, 'Action');

이전 연결

스택으로 연결될 수 있도록 블록 상단에 노치를 만듭니다. 할 수 있습니다.

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

JSON

입력되지 않음:

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

유형 (드물게 사용):

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

자바스크립트

입력되지 않음:

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

입력 (드물게 사용):

this.setPreviousStatement(true, 'Action');

출력 차단

블록에는 단일 출력이 있을 수 있으며, 이는 앞쪽 가장자리를 기준으로 합니다. 출력은 값 입력에 연결됩니다. 출력이 있는 블록은 일반적으로 값 블록이라고 합니다.

JSON

입력되지 않음:

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

유형:

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

자바스크립트

입력되지 않음:

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

유형:

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

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

입력 차단

블록에는 하나 이상의 입력이 있으며, 각 입력에는 필드를 포함하며, 연결로 끝날 수 있습니다. 여기에는 사용할 수 있습니다.

값 입력: 기기의 출력 연결에 연결 값 블록을 사용합니다. math_arithmetic 블록 (더하기, 빼기)은 두 개의 값 입력이 있는 블록의 예
구문 입력: 문 블록의 이전 연결 이 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는 필드의 순서를 자동으로 변경하고 더미 입력을 생성했습니다. 외부 입력에서 내부 입력으로 전환되었습니다.

또한 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 문자열. 나머지 매개변수는 유형에 따라 달라집니다.

필드: <ph type="x-smartling-placeholder">
- field_input
- field_dropdown
- field_checkbox
- field_colour
- field_number
- field_angle
- field_variable
- field_label
- field_image.
입력: <ph type="x-smartling-placeholder">
- input_value
- input_statement
- input_dummy
- input_end_row

또한 맞춤 입력란을 직접 정의하고 커스텀 입력을 생성하고 인수로 전달합니다.

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

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 객체가 있을 수 있으므로 체이닝이 가능합니다. 결국 Blockly가 args0 배열에 객체를 생성할 수 없는 경우( alt 객체를 시도하는 경우 해당 객체는 건너뜁니다.

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

`implicitAlign0`

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

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

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

`message1`, `args1`, `implicitAlign1`

일부 블록은 둘 이상의 개별 부분으로 자연스럽게 나뉩니다. 행이 두 개인 다음과 같은 반복 블록을 생각해 보세요.

이 블록이 단일 메시지로 설명된 경우 message0 속성 "repeat %1 times %2 do %3"입니다. 이 문자열은 번역사에게 어색합니다. %2 대체가 무엇을 의미하는지 설명하기 어렵습니다. %2 더미 일부 언어에서는 입력을 원하지 않을 수도 있습니다. 또한 여러 개의 블록이 포함되어 있습니다. 더 나은 접근 방식 JSON이 둘 이상의 메시지와 인수 속성을 사용하는 것입니다.

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부터 시작하여 순차적으로 증가합니다. 참고: 블록 팩토리는 메시지를 여러 부분으로 분할할 수 없지만 그렇게 하는 것은 간단합니다.

JavaScript의 입력 및 필드

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

자바스크립트

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 메서드도 포함되어 있습니다. 맞춤 입력. 이 경우 식별자는 맞춤 입력의 생성자에 직접 전달됩니다.

자바스크립트

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

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

`setCheck`

자바스크립트

input.setCheck('Number');

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

`setAlign`

자바스크립트

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가 있는 블록에 추가되면 1개가 생성됩니다. 선택적으로 입력에 원하는 수의 fields를 추가할 수 있습니다. 이 필드 각 입력의 목적을 설명하는 라벨로 사용되는 경우가 많습니다.

자바스크립트

input.appendField('hello');

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

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

자바스크립트

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

appendField('hello') 호출은 실제로 명시적인 FieldLabel 생성자: appendField(new Blockly.FieldLabel('hello')) 생성자를 사용하려는 유일한 경우는 CSS 규칙을 사용하여 텍스트의 스타일을 지정할 수 있습니다.

인라인과 외부 비교

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

블록 정의는 입력 문장의 확인할 수 있습니다 false인 경우 모든 값이 외부 입력입니다 (예: 삽입해야 합니다. true이면 모든 값 입력이 인라인입니다 (예: 삽입해야 합니다.

JSON

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

자바스크립트

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

정의되지 않은 경우 Blockly는 몇 가지 휴리스틱을 사용하여 어떤 모드가 있습니다. Blockly가 올바른 선택을 한다고 가정하고 이 필드는 정의되지 않은 상태로 둡니다. 언어마다 다른 번역이 자동으로 사용할 수 있습니다. "set %1 to %2" (외부 입력)의 JSON 예를 참고하세요. 이 페이지 앞부분의 "put %2 in %1" (인라인 입력)

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

필드

필드는 블록 내에 있는 대부분의 UI 요소를 정의합니다. 여기에는 문자열 레이블, 이미지, 입력을 리터럴 데이터 일종의 언어입니다. 가장 간단한 예는 math_number 블록입니다. 이 메서드는 field_input를 사용하여 사용자가 숫자를 입력할 수 있도록 합니다.

필드는 appendField.

Blockly는 텍스트 입력, 색상 선택 도구, 색상 선택 도구, 살펴보겠습니다 필드를 직접 만들 수도 있습니다.

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

→ 맞춤 입력란 생성에 대해 자세히 알아보기

아이콘

아이콘은 'meta'를 표시하는 블록에서 UI 요소를 정의합니다. 포드의 상태를 차단될 수 있습니다.

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

Blockly는 댓글 아이콘을 비롯한 여러 아이콘을 기본적으로 제공합니다. 표시됩니다. 나만의 아이콘을 만들 수도 있습니다.

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

도움말

사용자가 블록 위에 마우스를 가져가면 도움말에서 바로 도움을 받을 수 있습니다. 텍스트가 길면 자동으로 줄바꿈됩니다.

JSON

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

자바스크립트

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

JavaScript API에서 도움말은 정적 문자열입니다. 이렇게 하면 동적인 도움을 받을 수 있습니다. math_arithmetic에서 사용된 드롭다운 옵션에 따라 변경되는 도움말의 예 선택합니다.

자바스크립트

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

차단에는 도움말 페이지를 연결할 수 있습니다. 이는 해당 차단을 마우스 오른쪽 버튼으로 클릭하고 '도움말'을 선택하여 선택합니다. 값이 null이면 메뉴가 회색으로 표시됩니다. 있습니다.

JSON

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

자바스크립트

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

자바스크립트

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를 사용하면 고급 블록에서 모양을 변경할 수 있는데, 특히 사용자가 대화상자를 열어 구성요소를 추가, 제거 또는 재정렬할 수 있습니다. 뮤테이터는 mutator 키를 사용하여 JSON을 통해 추가됩니다.

JSON

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

블록별 구성

블록 인스턴스에는 있습니다. 이는 특정 요소를 반영하도록 작업공간을 제한하는 데 사용할 수 도메인의 속성 (예: 정확히 하나의 '시작' 이벤트가 있음) 또는 포커스 사용자의 노력 (예: 튜토리얼)

삭제 가능 상태

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

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

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

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

자바스크립트

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

destroy 메서드는 블록의 상위 요소가 삭제된 후에 호출되지만 삭제해야 합니다.

컨텍스트 메뉴

기본적으로 블록에는 마우스 오른쪽 버튼 클릭 컨텍스트 메뉴가 있어 댓글 추가, 중복 차단과 같은 기능을 예로 들 수 있습니다

개별 블록의 컨텍스트 메뉴를 사용 중지하려면 다음 단계를 따르세요.

block.contextMenu = false;

메뉴에 표시되는 옵션을 맞춤설정할 수도 있습니다. 다음에 대한 메뉴를 맞춤설정하려면 자세한 내용은 컨텍스트 메뉴 문서를 참조하세요. 개별 블록의 메뉴를 맞춤설정하려면 customContextMenu 이 함수는 메뉴 옵션의 배열을 가져와 즉, 항목을 추가하거나 삭제할 수 있습니다.

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

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

블록 정의

JSON 형식과 JavaScript API 비교

JSON

자바스크립트

자바스크립트

블록 색상

JSON

자바스크립트

문 연결

다음 연결

JSON

자바스크립트

이전 연결

JSON

자바스크립트

출력 차단

JSON

자바스크립트

입력 차단

JSON의 입력 및 필드

JSON

JSON

인수

JSON

implicitAlign0

message1, args1, implicitAlign1

JSON

JavaScript의 입력 및 필드

자바스크립트

자바스크립트

setCheck

자바스크립트

setAlign

자바스크립트

appendField

자바스크립트

자바스크립트

인라인과 외부 비교

JSON

자바스크립트

필드

아이콘

도움말

JSON

자바스크립트

자바스크립트

맞춤설정

도움말 URL

JSON

자바스크립트

리스너 및 검사기 변경

JSON

자바스크립트

변형자

JSON

블록별 구성

삭제 가능 상태

수정 가능한 상태

이동 가능 상태

데이터 차단

파괴

JSON

자바스크립트

컨텍스트 메뉴

`implicitAlign0`

`message1`, `args1`, `implicitAlign1`

`setCheck`

`setAlign`

`appendField`