ตัวแปร

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

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

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

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

ระบุประเภทตัวแปรและบล็อกของตัวแปร, ซึ่งรวมถึง Getters และ Setters
กำหนดค่ากล่องเครื่องมือ เพื่อใช้ประเภทและการบล็อกตัวแปรของคุณ
นิยามเครื่องมือสร้าง สำหรับตัวแปรและบล็อกของตัวแปร

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

การบล็อกพื้นฐานที่สุดสำหรับการเข้าถึงและจัดการตัวแปรคือ Getter และ Setter Blocks มาดูเกม 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 เป็นค่าว่าง ผลลัพธ์อาจเป็นประเภทใดก็ได้ นอกจากนี้ ให้สังเกตว่ามีตัวแปร อินพุตของ 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);
    ...
  }
};

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

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

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

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

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

เพิ่ม Getters และ Setters ใหม่ลงในหมวดหมู่

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

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

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

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

และระบบจะสร้างตัวแปรที่พิมพ์ด้วย Panda!

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

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

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

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