ตัวแปร

ตัวแปรเป็นแนวคิดการเขียนโปรแกรมที่สำคัญ Blockly รองรับภาษาที่พิมพ์แบบไดนามิก เช่น Python และ JavaScript และเมื่อมีงานเพิ่มเติมเล็กๆ น้อยๆ คุณก็เพิ่มข้อมูลเพื่อให้รองรับภาษาที่พิมพ์มากได้ (หรือภาษาที่พิมพ์แบบคงที่) เช่น Java หรือ C

มีข้อมูลเพิ่มเติมเกี่ยวกับภาษาแบบไดนามิกและภาษาที่พิมพ์แบบคงที่ได้ที่นี่

บล็อกช่องตัวแปรต่างๆ ซึ่งเป็นช่องแบบเลื่อนลงแบบไดนามิกที่แสดงชื่อตัวแปรที่ผู้ใช้ระบุไว้ ด้านล่างเป็นตัวอย่างของหนึ่ง

โดยค่าเริ่มต้น Blockly จะอนุญาตให้มีการกำหนดตัวแปรทุกประเภทให้กับตัวแปร และโปรแกรมสร้างทั้งหมดที่บล็อกลีมีให้ใช้สำหรับภาษาที่พิมพ์แบบไดนามิก หากใช้ภาษาที่พิมพ์แทน คุณสามารถกำหนดค่า Blockly ให้รองรับได้โดยทำตามขั้นตอนต่อไปนี้

บล็อกตัวแปรที่ไม่ได้พิมพ์

บล็อกขั้นพื้นฐานที่สุดสำหรับการเข้าถึงและจัดการตัวแปรคือบล็อก Getter และ Setter ลองมาดูที่บล็อก Getter และ Setter ที่ Blockly มีให้กัน

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);
    ...
  }
};

ซึ่งจะสร้างบล็อก 2 บล็อกต่อไปนี้

รายละเอียดสำคัญที่ควรทราบคือ หากตั้งค่า "เอาต์พุต" ของตัวแปร Getter เป็น Null ค่าผลลัพธ์ที่ได้จะเป็นประเภทใดก็ได้ นอกจากนี้ โปรดทราบว่าอินพุตของ ตัวตั้งค่าตัวแปรไม่ได้ระบุการตรวจสอบใดๆ เลย ผลก็คือ ตัวแปรจะสามารถตั้งค่า เป็นค่าประเภทใดก็ได้

บล็อกตัวแปรที่พิมพ์

คุณสามารถเพิ่ม 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);
    ...
  }
};

การสร้างบล็อกจะมีอยู่ 2 ประเภทด้วยกัน คือ Getter และ Setter รายการแบบเลื่อนลงของเมนูจะแสดงเฉพาะ ตัวแปรประเภท Panda เท่านั้น อินพุตและเอาต์พุตของพวกเขารับเฉพาะ การเชื่อมต่อกับประเภท Panda เท่านั้น โดย defaultType ของช่องดังกล่าวต้องตั้งค่าเป็นหนึ่งในค่าในอาร์เรย์ variableTypes การไม่ตั้งค่า defaultType ขณะที่มอบอาร์เรย์ variableTypes จะทำให้เกิดข้อผิดพลาด

โดยค่าเริ่มต้นจะไม่มีสัญญาณบอกสถานะที่แสดงให้เห็นผู้ใช้ว่ากำลังใช้งานประเภทใดอยู่ วิธีง่ายๆ อย่างหนึ่งในการแยกประเภทตัวแปรคือ การใช้สี

เพิ่มตัวแปรในกล่องเครื่องมือ

หากต้องการให้ตัวแปรประเภทใหม่นี้มีประโยชน์ต่อผู้ใช้ คุณต้องเพิ่มวิธีสร้างและใช้ตัวแปรใหม่

สร้างหมวดหมู่แบบไดนามิกใหม่สำหรับตัวแปร หากยังไม่มี

เพิ่ม Getter และเครื่องมือตั้งค่าใหม่ลงในหมวดหมู่

ปุ่มสร้างตัวแปร

ถัดไป ผู้ใช้ต้องมีวิธีสร้างตัวแปร วิธีที่ง่ายที่สุดคือการใช้ปุ่ม "สร้างตัวแปร"

เมื่อสร้างปุ่ม ให้ทำการโค้ดเรียกกลับ

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

แล้วระบบจะสร้างตัวแปรประเภท Panda

วิธีที่ง่ายที่สุดในการอนุญาตให้ผู้ใช้สร้างตัวแปรหลายประเภทคือการมีปุ่ม "สร้าง" 1 ปุ่มต่อประเภท (เช่น สร้างตัวแปรสตริง สร้างตัวแปรหมายเลข สร้างตัวแปร Panda)

แต่หากมีตัวแปรมากกว่า 2 หรือ 3 ประเภท คุณก็จะเห็นปุ่มมากเกินไป ในกรณีนี้ ให้ลองใช้ @blockly/plugin-typed-variable-modal เพื่อแสดงป๊อปอัปที่ผู้ใช้สามารถเลือกประเภทตัวแปรที่ต้องการได้

กำหนดเครื่องกำเนิดไฟฟ้า

สุดท้าย คุณจะต้องกำหนดเครื่องมือสร้างโค้ดบล็อกสำหรับบล็อกตัวแปรใหม่ คุณยังเข้าถึงรายการตัวแปรได้โดยตรงด้วย Blockly.Workspace.getAllVariant() เพื่อรับตัวแปรทุกประเภท หรือ Blockly.Workspace.getVariantOfType() เพื่อรับตัวแปรทั้งหมดบางประเภท