Blockly 설정하기 Part.1

저번 포스팅을 읽으신 분이라면 Blockly의 창을 띄워보셨을 겁니다. 오늘은 띄운것에서 끝내는 것이 아닌 그것에 대한 상세 설정을 건드려보도록 해보죠.

Add Custom Blocks 

저번에 toolbox에서 xml안에 여러개의 블록을 추가해본적이 있죠? 하지만 그 블록들은 이미 google에서 기존에 정의해놓은 블록입니다.

그렇다면 기존에 없는 블록을 사용하고 싶다면 어떻게 해야할까요..? 다행히 방법이 두가지가 있습니다..

첫번째 방법은 BlocklyGithub에서 다운받은 소스내에서 blocks/ 에 블록을 새롭게 정의해서 blocks_compressed.js를 새로 만들어 쓰는방법

또는 Blockly.inject를 하기전에 script에서 바로 블록을 선언해서 사용하는 방법이 있습니다. 우리는 일단 후자의 방법을 사용해서 블록을 추가시켜보도록 하죠.

블록을 생성하는 방법은 Json방식 Javascript 두개의 방식으로 생성할 수 있습니다. 각자의 장단점이 있는데요 Json방식을 사용하면 하나의 코드로 여러 플랫폼에서 사용할 수 있다는 것 다만 Json방식을 사용하면 mutator나 유효성 검사같은 고급 기능에 대해서는 정의 할 수 없습니다.

(사실 google guide에 이렇게 적혀있어서 옮긴것인데 어처피 웹에서는 json으로 작성해서 javascript jsonInit 으로 기능확장을 할 수 있어서 기본적으로는 json으로 관리하는 것이 좋을 것 같다.)

//기본적으로 init까지는 공통소스이다.
Blockly.Blocks['string_length'] = {
  init: function() {  
    // JSON 방식
    this.jsonInit({
      "message0": "length of %1",
      "args0": [{
        "type": "input_value",
        "name": "VALUE",
        "check": "String"
      }],
      "output": "Number",
      "colour": 160,
    })
    // JAVASCRIPT 방식
    this.appendValueInput("VALUE")
          .setCheck("String")
          .appendField("length of");
    this.setOutput(true, "Number");
    this.setColour(160);
  }
}

위 방식으로 블록을 생성했을 때 나오는 블록

하나 설명하자면 Blockly.Blocks[""] 괄호안에 들어간 "string_length" 는 블록의 이름이다. 다른 블록과 겹치면 안된다. 만약 겹칠경우 나중에 선언된 블록으로 사용

그외에 나머지 요소에 대해서는 일단은! Block Factory^[각주:1]에서 확인을 하자..

간단히 설명하자면 좌측화면에서 블록의 형태 및 이름, input Field, input Value에 대한 정의를 하고

우측에서 좌측에서 정의한 블록모양 그리고 소스로 했을 때 나오는 모양이다. ( Generator stub은 타언어로 변경했을 때 나오는 값 )

Toolbox 

워크스페이스 좌측에 있는 메뉴로서 직접 사용자가 메뉴를 지정할 수 있다. 바로 위 Block Factory좌측 부분!

나 같은경우는 현재까지 주로 toolbox는 xml로 선언하고 있다. 왜냐하면 string이라고 해봤자 그냥 xmlToString 같은 느낌이여서 따로 사용하지 않고 있다.

Categories - block들을 카테고리로 분리할 수 있습니다.

카테고리를 사용하는 이유는 복잡한 블록을 사용할 경우에는 많은 블록을 목적에 맞게 사용하기 위해서이다. (추가시 자동으로 trashcan true)

밑에 예제 방법이 있고 추가적으로 category안에 category를 또 구현해서 트리형 구조를 만들 수 있다.

category의 attribute

• colour - 카테고리 앞에 색상 label을 추가시킬 수 있습니다.
  * 컬로표기는 HSV표기법을 사용하며 S와 V는 기본적으로 45% 65%로 지정되어있다. (이것을 변경하려면 소스내부에서 수정해야한다.)
  
• custom - VARIABLE과 PROCEDURE 두개의 커스텀이 있다.
  variable은 변수의 CRUD기능을 가지고 있다. 마찬가지로 procedure은 함수쪽을 관리하고 있다.
• expanded - 카테고리를 1단이 아닌 categories (2단 이상의) 를 구현시 최초 로드시 카테고리를 열어놓을지 닫아놓을지 결정

Block Group - 블록과 블록을 합친 블록을 리스트에 배치할 수 있다...(예제를 보자;; 말로 쓰는 이상하다.)

// 숫자를 미리 지정 값 지정 안할 시 0
<block type="math_number">
  <field name="NUM">1</field>
</block>

//블록의 들어갈 블록을 미리 지정한다.
<block type="controls_for">
  <value name="FROM">
    <block type="math_number>
      <field name="NUM">1</field>
    </block>
  </value>
  <value name="TO">
    <block type="math_number">
      <field name="NUM">10</field>
    </block>
  </value>
  <value name="BY">
    <block type="math_number">
      <field name="NUM">1</field>
    </block>
  </value>
</block>

// shadow 블록을 사용하여 input에 Hint같은 기능을 사용할 수 있다. 
// 유사하면서 굉장히 다른점은 shadow에 값을 넣지 않을 시 shadow값으로 실행된다.
<block type="math_arithmetic">
  <field name="OP">ADD</field>
  <value name="A">
    <shadow type="math_number">
      <field name="NUM">10</field>
    </shadow>
  </value>
  <value name="B">
    <shadow type="math_number">
      <field name="NUM">1</field>
    </shadow>
  </value>
</block>

toolbox의 당연하게 똑같은 type의 중첩되게 넣을 수 없다 (팅기지 않고 자동으로 중복제거)

Separators - <sep gap="30"></sep>으로 블록사이의 간격을 줄 수 있다. 근데 나는 안된다...(gap 지정안할시 default = 24)

Disabled - block 태그에 속성으로 disabled="true"를 추가시킴으로써 블록 비활성화 처리

Changing the Toolbox - workspace.updateToolbox(newTree); 명령어로 언제든지 toolbox를 업데이트 할 수 있다.

전체 확인해보기

1 10 1 ADD 1 1

---

1. 블록공장이라고 생각하면 된다. 현재 소스로 입력한 것을 소스로 입력하는 것이 아닌 블록을 통해서 만들 수 있게 해준다. [본문으로]