JavaScript의 블록 구조

이 문서에서는 JavaScript를 사용하여 블록의 입력 및 필드 (라벨 포함)를 정의하는 방법을 설명합니다. 이러한 용어에 익숙하지 않다면 계속 진행하기 전에 블록의 구조를 참고하세요.

JSON에서 입력, 필드, 연결을 정의할 수도 있습니다.

입력 추가

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

자바스크립트

init: function() {
  // ...
  this.appendEndRowInput()
      .appendField('for each')
      .appendField('item')
      .appendField(new Blockly.FieldVariable(), 'VAR');
  this.appendValueInput('LIST')
      .setCheck('Array')
      .setAlign(Blockly.inputs.Align.RIGHT)
      .appendField('in list');
  this.appendStatementInput('DO')
      .appendField('do');
  this.appendDummyInput()
      .appendField('end');
}

각 appendInput 메서드는 식별자 문자열을 사용할 수 있으며, 이 문자열은 코드 생성기가 입력에 연결된 블록의 코드를 가져오는 데 사용됩니다. 코드 생성기는 더미 입력과 행 끝 입력을 거의 참조하지 않으므로 일반적으로 식별자를 할당할 이유가 없습니다.

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

자바스크립트

init: function() {
  // ...
  this.appendInput(new MyCustomInput('INPUT_NAME'))
      .appendField('an example label')
}

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

필드 추가

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

자바스크립트

init: function() {
  // ...
  this.appendDummyInput()
      .appendField('hello');
}

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

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

자바스크립트

init: function() {
  // ...
  this.appendDummyInput()
      .appendField('hello')
      .appendField(new Blockly.FieldLabel('Neil', 'person'));
}

appendField('hello') 호출은 실제로 명시적 FieldLabel 생성자(appendField(new Blockly.FieldLabel('hello')))를 사용하는 단축키입니다. 생성자를 사용해야 하는 유일한 경우는 CSS 규칙을 사용하여 라벨의 스타일을 지정할 수 있도록 클래스 이름을 지정하는 경우입니다.

연결 확인

자바스크립트

init: function() {
  // ...
  this.appendValueInput('NUM')
      .setCheck('Number');
}

setCheck 메서드는 연결의 유형을 확인하는 데 사용됩니다. null 인수가 주어지면 기본값인 이 입력은 모든 블록에 연결될 수 있습니다. 자세한 내용은 연결 확인을 참고하세요.

필드 정렬

자바스크립트

init: function() {
  // ...
  this.appendValueInput('LIST')
      .appendField('in list')
      .setAlign(Blockly.inputs.Align.RIGHT);
}

setAlign 메서드는 입력 내 필드를 정렬하는 데 사용됩니다. 이 함수에 인수로 전달될 수 있는 자체 설명 값에는 Blockly.inputs.Align.LEFT, Blockly.inputs.Align.RIGHT, Blockly.inputs.Align.CENTER의 세 가지가 있습니다.

블록이 오른쪽에서 왼쪽으로 모드 (예: 아랍어 및 히브리어)로 렌더링되면 왼쪽과 오른쪽이 반대로 됩니다. 따라서 Blockly.inputs.Align.RIGHT는 필드를 왼쪽으로 정렬합니다.