Blockly 웹에서의 사용

Blockly로 만든 블록 + editor(workspace)를 웹에서 사용하려면 4가지 단계가 있다.
1. Blockly workspace를 삽입할 수 있는 웹페이지 준비
2. XML 형식으로 workspace의 카테고리, 블록 구성 등을 설정한다.
3. 완성된 workspace를 웹 페이지에 inject 한다.
4. 웹 페이지의 나머지 기능들을 구현한다.

필요한 파일 포함시키기

웹페이지에 Blockly workspace를 만들기 위해서는 일단 관련 파일을 추가해주는 구문이 필요하다.

<script src="../blockly_compressed.js"></script>
<script src="../python_compressed.js"></script>
<script src="../blocks_compressed.js"></script>

이런식으로!

내가 필요했던 건 뭐냐면
blockly_compressed.js : Blockly 자체 설정과 관련된 파일, Blockly 소스코드를 다운받으면 패키지 안 처음부터 들어있는 파일 중 하나

주의 언어명_compressed.js 파일은 반드시 blockly_compressed.js 파일 바로 밑 줄에서 포함시켜야 한다는 것

workspace 구성하기

Blockly workspace는 기본적으로 정해진 모양이 있지만, 그것 외에 포함시킬 블록의 종류나 블록 카테고리 등은 코드를 통해 마음대로 정해 줄 수 있다.

workspace 설정은 XML 형태로 하게 된다.
XML로 표현한 workspace 구조는 대략 다음과 같다.

<xml id="id로 사용할 이름" style="display:none">
    <category name="카테고리 이름">
        <block type="블록 타입(이름)"></block>
        <block type="블록 타입(이름)"></block>
                            .
                            .
                            .
    </category>
</xml>

이 XML 구조는 후에 workspace inject 함수를 호출할 때 넘겨지게 된다.
일종의 설정파일처럼 사용된다.
그렇기 때문에 display 속성은 none으로 설정한다.
이 XML 구조 자체가 변환되어 보이는 것이 아니라, inject 라는 함수의 파라미터로서 전달되어, 그 함수에서 이 XML 구조를 사용해 만들어낸 workspace가 눈에 보이게 되는 것이기 때문

Category 설정은 블록 여러 개를 하나의 카테고리로 묶어 더 손쉽게 관리할 수 있게 도와준다.
workspace 내에서 사용하는 블록의 개수가 적을 때는 상관없지만, 개수가 많이지게 되면 어떤 블록이 있는지 한 눈에 알아보기 어렵기 때문에 카테고리를 사용해서 관리하는 게 좋다.

웹 페이지에 workspace inject하기

workspace를 정의하면, 이제 실제로 웹페이지에 workspace를 삽입한다.
페이지에 workspace를 삽입하는 함수는
<script> 태그 안에 Javascript로 정의되며, 다음과 같다.

var demoWorkspace=Blockly.inject('blocklyDiv',{toolbox:document.getElementById('toolbox')});

demoWorkspace는 만들어 줄 workspace의 이름이다.
후에 세이브 or 로드 등의 조작을 할 때 이 이름을 가지고 workspace를 지정하게 된다.

Blockly.inject() 함수는 미리 정의 된 workspace 설정을 가져와 웹 페이지 상에 실제로 삽입하는 함수이다.
파라미터는 2개
1파라미터 : workspace를 삽입할 html element의 id이다.

demoWorkspace2 = Blockly.inject('blocklyDiv2', {media: 'media/', toolbox: toolbox});

여기서는 "blocklyDiv2"라는 div에 workspace를 삽입한다.
2파라미터 : XML설정을 가져오는 부분이다.
toolbox 라는 key에 XML element를 매칭해 가져오게 된다.
위에서는 XML을 HTML문서 내에 작성했으므로 document.getElementById()함수를 이용해 해당 태그의 내용을 읽어온다.

이 함수까지 호출하고 나면 웹페이지에 Blockly workspace가 삽입된다.