이 블록을 javascript로 정의 해보려고 한다.
1. Top+Bottom connection을 가짐
2. 2개의 Value Input
3. 중간에 dropdown field를 통해 연산의 종류 선택
4. '짧은 표현식'을 구현하고 있 ( a+= b)
그렇다면 이렇게 된다.
Blockly.Blocks['short_math'] = {
init: function() {
this.appendValueInput("a")
.setCheck("Number");
this.appendDummyInput()
.appendField(new Blockly.FieldDropdown([["+","+"], ["*","*"], ["-","-"], ["/","/"]]), "select")
.appendField("=");
this.appendValueInput("b")
.setCheck("Number");
this.setInputsInline(true);
this.setPreviousStatement(true);
this.setNextStatement(true);
this.setColour(260);
this.setTooltip("Short version of arithmetic calculations");
this.setHelpUrl("");
}
};Block 정의 함수
Block 정의 함수는 다음과 같은 형태를 하고 있습니다.
Blockly.Blocks['블록 이름']={
init:function(){
// 블록의 특성 정의
}
}- 이 구문은 한 .js 파일 내에 여러번 호출될 수 있다.
- 해당 파일 안에 정의하고 싶은 블록의 개수만큼 호출되어야 한다.
- JSON의 경우 한 번의 함수 호출로, 한꺼번의 여러 개의 블록을 정의할 수 있지만 , JavaScript 방식의 Blockly.Blockls[]의 경우 한 번에 한 블록 밖에 정의하지 못한다.
- 간단한 블록을 정의 할 때는 init 메소드를 삭제하고 다음과 같이 사용해도 큰 문제는 없지만
Blockly.Blocks['블록 이름']={
// 블록의 특성 정의
}mutator나 extension 고급 기능을 추가하게 되면 init 외에도 다양한 메소드를 추가하게 되기 때문에, 복잡한 구조의 블록의 경우 init을 생략하지 않는 위의 방법이 더 바람직하다.
1. 첫 번째 Value Input 정의
- 두 개의 value input을 가진다.
그 중 첫 번째 value input을 추가하는 부분은 다음과 같다.
this.appendValueInput("a")
.setCheck("Number");this : 지금 정의하고 있는 바로 이 블록, short_math를 의미
this.appendValueInput("a") : 이 블록에 'a'라는 이름을 가진 value input을 추가하겠다. 'a'는 블록에 표시되지 않지만, code generation 시에 block의 구성 요소를 지정하는 데 사용된다.
setCheck("Number") : 이 input이 받을 수 있는 자료형을 Number로 고정한다.
이렇게 설정하면 Number 이외의 자료형을 가진 value input은 이 블록에 적용되지 못한다.
이름이 setCheck인 이유 : input 내에서 타입을 지정해 주는 프로퍼티의 이름이 check이기 때문에.
javascript 스타일로 블록을 정의할 때는 이런식으로,
setXXX() 와 같은 하위 메소드를 호출해 블록 or input의 세부 프로퍼티를 조작한다.
2. Dropdown Field 추가
this.appendDummyInput()
.appendField(new Blockly.FieldDropdown([["+","+"], ["*","*"], ["-","-"], ["/","/"]]), "select")
.appendField("=");"Field 사용시에는 Dummy input을 같이 사용하는 경우가 많다."
는 특징이 여기서 나타난다.
appendDummyInput() : 이 블록에 dummy input을 추가하는 함수, dummy input의 field로 dropdown field를 추가하게 된다.
appendField() : input에 field를 추가하는 구문
해당 블록에 아예 새로운 field를 추가해 블록의 구조 자체를 바꾸는 함수
첫 번째의 appendField()에는 new Blockly.FieldDropdown([[“+”,”+”],[““,”“],[“-“,”-“],[“/“,”/“]]),”select”) 라는 구문이 파라미터로 전달된다.
이 파라미터는 바로 새로운 dropdown field를 생성하는 생성자 구문이다.
그 중 [[“+”,”+”],[““,”“],[“-“,”-“],[“/“,”/“]] 부분은 dropdown field의 option을 지정하는 리스트,
항목의 개수는 언제든지 늘릴 수 있다.
한 쌍의 string이 들어 있는 더 작은 리스트의 집합으로 이루어져 있음
string 쌍에서, 앞 string은 블록 사용자가 직접 보고 선택하게 될, 즉 블록에 직접 표시될 option 이름
뒤 string : 프로그램 내에서 사용되는 option 이름, 두 이름을 같게 해도 무방함
'select'는 dropdown field 자체의 이름을 지정한 것
coed generation 등을 할 때 지정자로써 요긴히 쓰인다.
두 번째 appendField()에는 '='라는 string 하나만 전달되었다. 이는 =라는 문자를 표시하는 label이고, 이런식으로 string 하나만 전달해서 추가할 수 있다.
두 번째 Value Input 정의 및 블록 세부 속성 정의
this.appendValueInput("b")
.setCheck("Number");
this.setInputsInline(true);
this.setPreviousStatement(true);
this.setNextStatement(true);
this.setColour(260);
this.setTooltip("Short version of arithmetic calculations");
this.setHelpUrl("");setInputsInline()은 Input을 inline 형태로 정렬할 건지 아닌지 결정하는 함수.
파라미터로는 true, false가 들어가고 true 라면 inline 정렬로 설정
밑에꺼가 inline정렬이 아닌 블록(automatic 정렬)이라고 하기도 함.
이렇게 input 결합부의 모양에서 차이가 난다.
setPreviousStatement()는 previous statement(top connection)의 유무를 정해 주는 함수.
생략 시 previous statement가 없는 블록이 되고, 파라미터를 true로 하여 이 함수를 호출해주면 블록에 previous statement가 생겨 다음과 같은 형태가 된다.
setNextStatement()는 next statement(bottom connection)의 유무를 정해 주는 함수.
setPreviousStatement()처럼, 생략할 시 nextstatement가 없는 블록이 된다.
setColour는 블록의 색깔을 정해주는 함수
색 정의를 할 때 HSV(Hue- Saturation-Value) 모델을 이용한다. 그 중에서도 이 함수로 직접 정해 줄 수 있는 값이 Hue이다.
Hue의 값 조정을 통해 바꾸면 된다.
setTooltip함수는 블록에 tooltip을 부여해 준다.
Tooltip은 블록에 마우스 커서를 올려 놓고, 일정 시간이 지나면 나타나는 작은 글 상자이다.
이 안에 들어가는 문구를 사용자가 마음대로 정할 수 있고
보통 블록에 대한 간략한 설명을 담고, 함수에 파라미터로 들어가는 string 값이 해당 블록의 tooltip 내용이 된다.
setHelpUrl() 함수의 파라미터로는 string이 들어간다.
이 string은 특정 URL을 나타낸다.
Tooltip만으로는 블록에 대해 충분히 설명할 수 없을 때, 더 상세한 설명을 제공해주는 페이지로 직접 이동할 수 있게 하기 위해 이 함수를 사용 한다.
Help Url이 설정된 블록 위에서 오른쪽 마우스를 클릭하면 다음가 같은 context menu가 나타나고, 클릭시 이 함수를 통해 지정해 놓은 웹 페이지로 바로 이동한다.
