변수

변수는 중요한 프로그래밍 개념입니다. Blockly의 동적 지원 약간의 추가 작업으로 Python과 같은 유형의 언어를 강타입 언어 (또는 정적 타입)를 지원하기 위한 정보를 추가할 수 있음 사용할 수 있습니다.

자세한 내용은 여기에서 확인하세요. 동적 입력 언어와 정적 입력 언어에 관한 정보를 제공합니다.

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"
    }
  ],
  ...
}

자바스크립트

// 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,
  ...
}

자바스크립트

// 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 유형의 변수를 표시합니다. 입력과 출력은 유형 Panda와의 연결입니다. 필드의 defaultType는 1로 설정되어야 합니다. variableTypes 배열의 값입니다. 동안 defaultType 설정 안 함 variableTypes 배열을 제공하면 오류가 발생합니다.

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

도구 상자에 변수 추가

이 새로운 유형의 변수를 사용자에게 유용하게 만들려면 새 변수를 만들고 사용합니다

새 동적 카테고리를 만듭니다. 를 사용하지 않는 것이 좋습니다.

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

변수 만들기 버튼

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

버튼을 만들 때 콜백 호출

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

Panda 유형 변수가 생성됩니다.

사용자가 여러 유형의 변수를 만들 수 있는 가장 쉬운 방법은 하나는 '만들기' 유형별 버튼 (예: 문자열 변수 만들기, 번호 만들기) 변수, Panda 변수 만들기).

변수 유형이 2~3개 이상인 경우 순식간에 버튼이 너무 많습니다. 이 경우 @blockly/plugin-typed-variable-modal 사용자가 원하는 변수 유형을 선택할 수 있는 팝업을 표시합니다.

생성기 정의

마지막으로 블록 코드 생성기를 정의해야 합니다. 바꾸어 보겠습니다. 변수 목록에 직접 액세스할 수도 있습니다. Blockly.Workspace.getAllVariables()를 사용하여 모든 유형의 모든 변수를 가져오거나 Blockly.Workspace.getVariablesOfType()을 호출하여 특정 유형의 모든 변수를 가져옵니다.