변수

변수는 중요한 프로그래밍 개념입니다. Blockly는 Python, JavaScript와 같이 동적으로 유형이 지정되는 언어를 지원하며, 약간의 추가 작업을 하면 자바나 C와 같은 강타입 언어 (또는 정적 유형 지정 언어)를 지원하는 정보를 추가할 수 있습니다.

동적 유형 언어와 정적 유형 언어에 관한 자세한 내용은 여기를 참고하세요.

Blockly는 사용자가 제공한 변수의 이름을 표시하는 동적 드롭다운 상자인 변수 필드를 제공합니다. 다음은 그 예입니다.

기본적으로 Blockly를 사용하면 모든 유형을 변수에 할당할 수 있으며 Blockly에서 제공하는 모든 생성기는 동적으로 유형이 지정된 언어용입니다. 입력 언어를 대신 사용하는 경우 다음을 수행하여 Blockly가 지원하도록 구성할 수 있습니다.

유형이 지정되지 않은 변수 블록

변수에 액세스하고 조작하기 위한 가장 기본적인 블록은 getter 블록과 setter 블록입니다. Blockly에서 제공하는 getter 및 setter 블록을 살펴보겠습니다.

JSON

// Block for variable getter.
{
  "type": "variables_get",
  "message0": "%1",
  "args0": [
    {    // Beginning of the field variable dropdown
      "type": "field_variable",
      "name": "VAR",    // Static name of the field
      "variable": "%{BKY_VARIABLES_DEFAULT_NAME}"    // Given at runtime
    }    // End of the field variable dropdown
  ],
  "output": null,    // Null means the return value can be of any type
  ...
},

// Block for variable setter.
{
  "type": "variables_set",
  "message0": "%{BKY_VARIABLES_SET}",
  "args0": [
    {
      "type": "field_variable",
      "name": "VAR",
      "variable": "%{BKY_VARIABLES_DEFAULT_NAME}"
    },
    {
      "type": "input_value",    // This expects an input of any type
      "name": "VALUE"
    }
  ],
  ...
}

JavaScript

// Block for variable getter.
Blockly.Blocks['variables_get'] = {
  init: function() {
    this.appendDummyInput()
      .appendField(new Blockly.FieldVariable("VAR_NAME"), "FIELD_NAME");
    this.setOutput(true, null);
    ...
  }
};

// Block for variable setter.
Blockly.Blocks['variables_set'] = {
  init: function() {
    this.appendValueInput("NAME")
        .setCheck(null)
        .appendField("set")
        .appendField(new Blockly.FieldVariable("VAR_NAME"), "FIELD_NAME")
        .appendField("to");
    this.setOutput(true, null);
    ...
  }
};

이렇게 하면 다음 두 블록이 생성됩니다.

변수 getter의 'output'을 null로 설정하면 반환 값이 모든 유형이 될 수 있다는 점에 유의해야 합니다. 또한 변수 setter의 입력은 검사를 지정하지 않습니다. 따라서 변수를 모든 유형의 값으로 설정할 수 있습니다.

유형 변수 블록

유형 확인을 시행하는 getter와 setter를 추가할 수 있습니다. 예를 들어 'Panda' 유형의 변수를 만들었다면 다음 정의에 따라 적절한 유형의 getter와 setter를 만듭니다.

JSON

 // Block for Panda variable getter.
 {
  "type": "variables_get_panda",
  "message0": "%1",
  "args0": [
    {
      "type": "field_variable",
      "name": "VAR",
      "variable": "%{BKY_VARIABLES_DEFAULT_NAME}",
      "variableTypes": ["Panda"],    // Specifies what types to put in the dropdown
      "defaultType": "Panda"
    }
  ],
  "output": "Panda",    // Returns a value of "Panda"
  ...
},

 // Block for Panda variable setter.
{
  "type": "variables_set_panda",
  "message0": "%{BKY_VARIABLES_SET}",
  "args0": [
    {
      "type": "field_variable",
      "name": "VAR",
      "variable": "%{BKY_VARIABLES_DEFAULT_NAME}",
      "variableTypes": ["Panda"],
      "defaultType": "Panda"
    },
    {
      "type": "input_value",
      "name": "VALUE",
      "check": "Panda"    // Checks that the input value is of type "Panda"
    }
  ],
  "previousStatement": null,
  "nextStatement": null,
  ...
}

JavaScript

// Block for variable getter.
Blockly.Blocks['variables_get_panda'] = {
  init: function() {
    this.appendDummyInput()
      .appendField(new Blockly.FieldVariable(
          "VAR_NAME", ['Panda'], 'Panda'), "FIELD_NAME");
    this.setOutput(true, 'Panda');
    ...
  }
};

// Block for variable setter.
Blockly.Blocks['variables_set_panda'] = {
  init: function() {
    this.appendValueInput("NAME")
        .setCheck('Panda')
        .appendField("set")
        .appendField(new Blockly.FieldVariable(
            "VAR_NAME", null, ['Panda'], 'Panda'), "FIELD_NAME")
        .appendField("to");
        this.setPreviousStatement(true, null);
        this.setNextStatement(true, null);
    ...
  }
};

이렇게 하면 getter와 setter라는 두 가지 유형의 블록이 생성됩니다. 드롭다운에는 Panda 유형의 변수만 표시됩니다. 입력과 출력은 판다 유형 연결만 허용합니다. 필드의 defaultType는 variableTypes 배열의 값 중 하나로 설정해야 합니다. variableTypes 배열을 제공하는 동안 defaultType를 설정하지 않으면 오류가 발생합니다.

기본적으로 사용 중인 유형을 사용자에게 알려주는 시각적 표시기는 없습니다. 변수 유형을 쉽게 구분할 수 있는 한 가지 방법은 색상을 사용하는 것입니다.

도구 상자에 변수 추가

이 새로운 유형의 변수를 사용자에게 유용하게 만들려면 새 변수를 만들고 사용하는 방법을 추가해야 합니다.

변수에 대한 새 동적 카테고리가 없으면 만듭니다.

새 getter와 setter를 카테고리에 추가합니다.

변수 만들기 버튼

다음으로, 사용자는 변수를 만들 방법이 필요합니다. 가장 간단한 방법은 '변수 만들기' 버튼을 사용하는 것입니다.

버튼을 만들 때 콜백을 호출합니다.

Blockly.Variables.createVariableButtonHandler(button.getTargetWorkspace(), null, 'panda');

그러면 Panda 유형 변수가 생성됩니다

사용자가 여러 유형의 변수를 만들 수 있는 가장 쉬운 방법은 유형당 하나의 '만들기' 버튼을 갖는 것입니다 (예: 문자열 변수 만들기, 숫자 변수 만들기, 판다 변수 만들기).

변수 유형이 2~3개 이상인 경우 버튼이 너무 많아질 수 있습니다. 이 경우 @blockly/plugin-typed-variable-modal을 사용하여 사용자가 원하는 변수 유형을 선택할 수 있는 팝업을 표시해 보세요.

생성기 정의

마지막으로 새 변수 블록의 블록 코드 생성기를 정의해야 합니다. 또한 Blockly.Workspace.getAllVariables()를 사용하여 변수 목록에 직접 액세스하여 모든 유형의 모든 변수를 가져오거나 Blockly.Workspace.getVariablesOfType()을 사용하여 특정 유형의 모든 변수를 가져올 수 있습니다.