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를 채우는 것을 확인할 수 있습니다. 실시간 데모를 확인하세요.