도구 상자에서 블록의 상태를 구성 (사전 설정)할 수 있습니다. 예를 들어 필드를 기본값으로 설정하거나 두 블록을 함께 연결할 수 있습니다. 자녀 블록의 기본값으로 사용되는 섀도우 블록을 만들 수도 있습니다.
예
다음은 사전 설정 블록의 몇 가지 예입니다.
사전 설정된 필드 값으로 차단
다음은 필드에 기본값 0 대신 숫자 42가 표시되는 math_number 블록입니다.
이 필드를 설정하는 도구 상자는 다음과 같습니다.
JSON
{
"kind": "flyoutToolbox",
"contents": [
{
"kind": "block",
"type": "math_number",
"fields": {
"NUM": 42
}
},
]
}
XML
<xml id="toolbox" style="display: none">
<block type="math_number">
<field name="NUM">42</field>
</block>
</xml>
사전 연결된 블록
다음은 math_number 블록 3개가 연결된 controls_for 블록입니다.
다음은 이러한 블록을 미리 연결하는 도구 상자입니다.
JSON
{
"kind": "flyoutToolbox",
"contents": [
{
"kind": "block",
"type": "controls_for",
"inputs": {
"FROM": {
"block": {
"type": "math_number",
"fields": {
"NUM": 1
}
}
},
"TO": {
"block": {
"type": "math_number",
"fields": {
"NUM": 10
}
}
},
"BY": {
"block": {
"type": "math_number",
"fields": {
"NUM": 1
}
}
},
}
},
]
}
XML
<xml id="toolbox" style="display: none">
<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>
</xml>
사용 중지된 블록
사용 중지된 블록은 도구 상자에서 드래그할 수 없습니다. 블록은 선택사항인 disabled 속성을 사용하여 개별적으로 사용 중지할 수 있습니다.
JSON
{
"kind": "flyoutToolbox",
"contents": [
{
"kind": "block",
"type":"math_number"
},
{
"kind": "block",
"type": "math_arithmetic"
},
{
"kind": "block",
"type": "math_single",
"disabled": "true"
}
]
}
XML
<xml id="toolbox" style="display: none">
<block type="math_number"></block>
<block type="math_arithmetic"></block>
<block type="math_single" disabled="true"></block>
</xml>
setDisabledReason를 사용하여 프로그래매틱 방식으로 차단을 사용 중지하거나 사용 설정할 수도 있습니다.
차단 구성
작업 영역에서 구성할 수 있는 방식으로 도구 상자에서 블록을 구성할 수 있습니다. 예를 들어 필드 값을 설정하고, 블록을 값 또는 문 입력에 연결하고, 주석을 추가하고, 블록을 접거나 사용 중지할 수 있습니다. 이는 도구 상자에서 작업공간에서 블록을 직렬화하는 데 사용하는 것과 동일한 코드를 사용하여 블록을 구성하기 때문입니다.
또한 차단 구성을 쉽게 만들 수 있습니다. 블록을 작업 공간에 로드하고 원하는 대로 구성한 다음 콘솔에서 다음 코드를 실행하여 직렬화하면 됩니다.
JSON
console.log(Blockly.serialization.workspaces.save(Blockly.getMainWorkspace()));
XML
console.log(Blockly.Xml.workspaceToDom(Blockly.getMainWorkspace()));
그런 다음 구성 코드를 복사하여 도구 상자에 붙여넣을 수 있습니다. 툴박스에서 무시되는 x, y, id 속성을 삭제해야 합니다.
변수 필드
변수 필드는 도구 상자에 있을 때와 직렬화될 때 다르게 지정해야 할 수 있습니다.
특히 변수 필드가 일반적으로 JSON으로 직렬화될 때는 변수의 이름과 유형이 별도로 직렬화되므로 변수 필드에는 나타내는 변수의 ID만 포함됩니다. 하지만 도구 상자에는 해당 정보가 포함되어 있지 않으므로 변수 필드에 직접 포함해야 합니다.
{
"kind": "flyoutToolbox",
"content": [
{
"kind": "block",
"type": "controls_for",
"fields": {
"VAR": {
"name": "index",
"type": "Number"
}
}
}
]
}
그림자 블록
그림자 블록은 여러 기능을 실행하는 자리표시자 블록입니다.
- 부모 블록의 기본값을 나타냅니다.
- 이를 통해 사용자는 숫자 또는 문자열 블록을 가져올 필요 없이 값을 직접 입력할 수 있습니다.
- 일반 블록과 달리 사용자가 블록을 그 위에 놓으면 대체됩니다.
- 예상되는 값의 유형을 사용자에게 알립니다.
섀도우 블록을 만들려면 block 속성이나 <block> 태그 대신 shadow 속성 (JSON)이나 <shadow> 태그(XML)를 사용하세요. 예를 들어 다음은 math_number 섀도우 블록 2개가 연결된 math_arithmetic 블록입니다.
다음은 이러한 그림자 블록을 사용하는 도구 상자입니다.
JSON
{
"kind": "flyoutToolbox",
"contents": [
{
"kind": "block",
"type": "math_arithmetic",
"fields": {
"OP": "ADD"
},
"inputs": {
"A": {
"shadow": {
"type": "math_number",
"fields": {
"NUM": 1
}
}
},
"B": {
"shadow": {
"type": "math_number",
"fields": {
"NUM": 1
}
}
}
}
},
]
}
XML
<xml id="toolbox" style="display: none">
<block type="math_arithmetic">
<field name="OP">ADD</field>
<value name="A">
<shadow type="math_number">
<field name="NUM">1</field>
</shadow>
</value>
<value name="B">
<shadow type="math_number">
<field name="NUM">1</field>
</shadow>
</value>
</block>
</xml>