Notice
Recent Posts
Recent Comments
Link
«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
Archives
Today
Total
관리 메뉴

우기TIL

Blockly 설정하기 Part.1 본문

클라이언트/BlocklyJS

Blockly 설정하기 Part.1

우기왕 2016. 9. 4. 19:27

저번 포스팅을 읽으신 분이라면 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. 블록공장이라고 생각하면 된다. 현재 소스로 입력한 것을 소스로 입력하는 것이 아닌 블록을 통해서 만들 수 있게 해준다. [본문으로]

'클라이언트 > BlocklyJS' 카테고리의 다른 글

Blockly 알아보기  (0) 2016.09.04
Comments