고정 크기 워크스페이스

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 편집기가 div를 채우고 도구 상자에 7개의 블록이 표시됩니다. 실시간 데모를 확인하세요.