고정된 크기의 작업공간

Blockly를 웹페이지에 배치하는 가장 간단한 방법은 빈 'div' 태그에 삽입하는 것입니다.

1. 코드 가져오기

애플리케이션에 가장 적합한 방식으로 코드를 가져옵니다.

2. 영역 정의

다음과 같이 페이지 본문의 어딘가에 빈 div를 추가하고 크기를 설정합니다.

<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>

3. 작업공간 삽입

다음과 같이 도구 상자 구조를 정의합니다.

const toolbox = {
  "kind": "flyoutToolbox",
  "contents": [
    {
      "kind": "block",
      "type": "controls_if"
    },
    {
      "kind": "block",
      "type": "controls_repeat_ext"
    },
    {
      "kind": "block",
      "type": "logic_compare"
    },
    {
      "kind": "block",
      "type": "math_number"
    },
    {
      "kind": "block",
      "type": "math_arithmetic"
    },
    {
      "kind": "block",
      "type": "text"
    },
    {
      "kind": "block",
      "type": "text_print"
    },
  ]
}

마지막으로 다음을 호출하여 정의된 div에 Blockly를 삽입합니다.

const workspace = Blockly.inject('blocklyDiv', {toolbox: toolbox});

workspace 변수는 현재 사용되지 않지만 나중에 블록을 저장하거나 코드를 생성하려고 할 때 중요해집니다. 둘 이상의 Blockly 인스턴스가 동일한 페이지에 삽입되는 경우 반환된 각 작업공간이 다른 변수에 저장되도록 합니다.

이제 브라우저에서 페이지를 테스트할 수 있습니다. Blockly의 편집기가 도구 상자에 7개의 블록으로 div를 채우는 것을 확인할 수 있습니다. 실시간 데모를 확인하세요.