맞춤 구성요소: 블록 패러다임

Blockly를 사용하는 애플리케이션을 설계할 때 선택할 수 있는 패러다임에는 여러 가지가 있습니다. 이러한 선택은 사용자에게 필요한 블록에 영향을 미치므로 조기에 고려해야 합니다.

구성

많은 Blockly 애플리케이션은 실행 가능한 프로그램이 아닌 구성을 설명하는 데 사용됩니다. 구성 애플리케이션은 일반적으로 작업공간에서 루트 수준 블록 하나를 초기화하는 것으로 시작합니다. Blockly 개발자 도구의 Block Factory 탭을 예로 들 수 있습니다.

Blockly.Blocks['factory_base'] = {
  init: function() {
    this.setDeletable(false);
    this.setMovable(false);
    this.setEditable(false);
    // etc...
  }
}

Blockly.serialization.blocks.append({'type': 'factory_base'}, workspace);

이렇게 하면 모든 사용자의 구성을 보유하는 탈착 불가능, 이동 불가능한 블록이 생성됩니다. 현재 구성을 확인하기 위해 작업공간은 언제든지 직렬화될 수 있습니다.

이러한 애플리케이션은 루트 블록에 연결되지 않은 블록을 자동으로 사용 중지하려고 할 수 있습니다. 이 작업은 다음 한 줄로 수행할 수 있습니다.

workspace.addChangeListener(Blockly.Events.disableOrphans);

연재 프로그램

Blockly 애플리케이션은 대부분 직렬 프로그램을 만들도록 설계되었습니다. 사용자는 순서대로 실행되는 블록을 쌓습니다.

작업공간의 모든 (사용 중지되지 않은) 블록이 프로그램의 일부를 형성합니다. 블록 스택이 여러 개 있으면 높은 블록이 먼저 실행됩니다. (두 스택의 높이가 거의 같은 경우 왼쪽 (RTL 모드에서는 오른쪽)의 스택에 우선순위가 부여됩니다.)

언제든지 작업공간을 실행 코드로 내보낼 수 있습니다. 이 코드는 JavaScript의 클라이언트 측 (eval 또는 JS 인터프리터 사용) 또는 모든 언어의 서버 측에서 실행될 수 있습니다.

import {javascriptGenerator} from 'blockly/javascript';

var code = javascriptGenerator.workspaceToCode(workspace);

병렬 프로그램

일부 Blockly 애플리케이션은 모든 블록 스택을 순차적으로 실행하지 않고 동시에 실행하도록 선택합니다. 드럼 루프가 멜로디와 동시에 실행되는 음악 애플리케이션을 예로 들 수 있습니다.

동시 실행을 구현하는 한 가지 방법은 각 블록에 코드를 개별적으로 생성하는 것입니다.

import {javascriptGenerator} from 'blockly/javascript';

var json = Blockly.serialization.workspaces.save(workspace);

// Store top blocks separately, and remove them from the JSON.
var blocks = json['blocks']['blocks'];
var topBlocks = blocks.slice();  // Create shallow copy.
blocks.length = 0;

// Load each block into the workspace individually and generate code.
var allCode = [];
var headless = new Blockly.Workspace();
for (var i = 0; block < topBlocks.length; i++) {
  var block = topBlocks[i];
  blocks.push(block);
  Blockly.serialization.workspaces.load(json, headless);
  allCode.push(javascriptGenerator.workspaceToCode(headless));
  blocks.length = 0;
}

도착어가 자바스크립트인 경우 allCode 배열을 사용하여 동시 실행을 위한 여러 JS 인터프리터를 만들 수 있습니다. 도착어가 Python과 같다면 allCode 배열을 스레딩 모듈을 사용하는 단일 프로그램으로 조립할 수 있습니다.

병렬 프로그램과 마찬가지로 변수 및 함수와 같은 공유 리소스와 관련하여 신중하게 결정을 내려야 합니다.

이벤트 기반 프로그램

이벤트 핸들러는 프로그램이 아닌 시스템에서 호출하는 함수일 뿐입니다. 이러한 블록은 실행할 블록 스택을 포함하거나 블록 스택 위에 있는 헤더일 수 있습니다.

일부 개발자는 이벤트 블록 상단에 '모자'를 추가하여 다른 블록과 구별되도록 합니다. 이것은 Blockly의 기본 모양은 아니지만 렌더기 상수 ADD_START_HATS를 true로 재정의 (맞춤 렌더기 Codelab - 상수 재정의)하거나 테마를 추가하고 블록 스타일에 모자 옵션을 설정하여 추가할 수 있습니다. 블록에 모자를 테마의 일부로 설정하는 방법에 관한 자세한 내용은 여기를 참고하세요.

이벤트 기반 모델 내에서는 프로그램 시작을 위한 핸들러도 만드는 것이 적합할 수 있습니다. 이 모델에서는 이벤트 핸들러에 연결되지 않은 작업공간의 모든 블록이 무시되고 실행되지 않습니다.

이벤트를 사용하는 시스템을 설계할 때는 동일한 이벤트 핸들러의 여러 인스턴스를 지원하는 것이 가능한지 또는 지원하는 것이 좋은지 고려하세요.