กําหนดการบล็อก

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

รูปแบบ JSON เทียบกับ JavaScript API

Blockly มี 2 วิธีในการกำหนดบล็อก ได้แก่ ออบเจ็กต์ JSON และฟังก์ชัน JavaScript รูปแบบ JSON ได้รับการออกแบบมาเพื่อลดความซับซ้อนของการแปล กระบวนการขณะพัฒนา สำหรับภาษาที่มีลำดับคำต่างกัน แนะนำให้ใช้รูปแบบ JSON ในการกำหนดบล็อก

อย่างไรก็ตาม รูปแบบ JSON ไม่สามารถระบุฟีเจอร์ขั้นสูงได้โดยตรง เช่น เป็นผู้เปลี่ยนแปลงหรือตรวจสอบ ซึ่งจะต้องเขียนด้วย JavaScript โดยปกติแล้วจะเป็น ส่วนขยาย

แอปที่ใช้ JavaScript ต้นฉบับของ Blockly จะเขียนได้ด้วย บล็อกคำจำกัดความโดยตรงสำหรับการเรียกฟังก์ชัน Blockly API ระดับล่างที่แสดง ในตัวอย่าง JavaScript ต่างๆ ด้านล่าง

JSON

Blockly.defineBlocksWithJsonArray([{
  "type": "string_length",
  "message0": 'length of %1',
  "args0": [
    {
      "type": "input_value",
      "name": "VALUE",
      "check": "String"
    }
  ],
  "output": "Number",
  "colour": 160,
  "tooltip": "Returns number of letters in the provided text.",
  "helpUrl": "http://www.w3schools.com/jsref/jsref_length_string.asp"
}]);

JavaScript

Blockly.Blocks['string_length'] = {
  init: function() {
    this.appendValueInput('VALUE')
        .setCheck('String')
        .appendField('length of');
    this.setOutput(true, 'Number');
    this.setColour(160);
    this.setTooltip('Returns number of letters in the provided text.');
    this.setHelpUrl('http://www.w3schools.com/jsref/jsref_length_string.asp');
  }
};

ฟังก์ชัน init จะสร้างรูปร่างของบล็อก ในบริบทของเนื้อหานี้ คีย์เวิร์ด this คือการบล็อกจริงที่กำลังสร้างขึ้น

ทั้ง 2 ตัวอย่างโหลด "string_length" เดียวกัน บล็อก

สำหรับในเว็บ รูปแบบ JSON จะโหลดโดยใช้ฟังก์ชัน initJson และยังทำให้หน้าเว็บของ Blockly สามารถผสมผสานเนื้อหาทั้งสองรูปแบบได้ด้วย ใช่เลย ต้องการกำหนดบล็อกของคุณด้วย JSON ทุกครั้งที่ทำได้ และใช้ JavaScript เฉพาะสำหรับการกำหนดบล็อกบางส่วนที่ JSON ไม่รองรับ

ด้านล่างนี้เป็นตัวอย่างการบล็อกที่กำหนดโดยใช้ JSON เป็นหลัก แต่ขยายโดยใช้ JavaScript API เพื่อแสดงเคล็ดลับเครื่องมือแบบไดนามิก

JavaScript

var mathChangeJson = {
  "message0": "change %1 by %2",
  "args0": [
    {"type": "field_variable", "name": "VAR", "variable": "item", "variableTypes": [""]},
    {"type": "input_value", "name": "DELTA", "check": "Number"}
  ],
  "previousStatement": null,
  "nextStatement": null,
  "colour": 230
};

Blockly.Blocks['math_change'] = {
  init: function() {
    this.jsonInit(mathChangeJson);
    // Assign 'this' to a variable for use in the tooltip closure below.
    var thisBlock = this;
    this.setTooltip(function() {
      return 'Add a number to variable "%1".'.replace('%1',
          thisBlock.getFieldValue('VAR'));
    });
  }
};

สีบล็อก

สีหลักของบล็อกจะกำหนดโดยพร็อพเพอร์ตี้ JSON colour ซึ่งก็คือค่า block.setColour(..) หรือโดยการใช้ธีมและกำหนดการบล็อก สไตล์

JSON

{
  // ...,
  "colour": 160,
}

JavaScript

init: function() {
  // ...
  this.setColour(160);
}

ดูคู่มือสีของบล็อก เพื่อดูรายละเอียดเพิ่มเติม

การเชื่อมต่อกับใบแจ้งยอด

ผู้ใช้สามารถสร้างลำดับการบล็อกโดยใช้ nextStatement และ เครื่องมือเชื่อมต่อ previousStatement เครื่อง ในเลย์เอาต์มาตรฐานของ Blockly การเชื่อมต่อเหล่านี้ อยู่ด้านบนและด้านล่าง โดยบล็อกสี่เหลี่ยมซ้อนกันในแนวตั้ง

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

สามารถเชื่อมต่อ nextStatement และ previousStatement ได้ พิมพ์แล้ว แต่ฟีเจอร์นี้ไม่ได้ใช้โดยการบล็อกมาตรฐาน

การเชื่อมต่อถัดไป

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

JSON

ไม่ได้พิมพ์:

{
  ...,
  "nextStatement": null,
}

ตัวพิมพ์ (หายาก):

{
  "nextStatement": "Action",
  ...
}

JavaScript

ไม่ได้พิมพ์:

this.setNextStatement(true);  // false implies no next connector, the default

พิมพ์ (หายาก):

this.setNextStatement(true, 'Action');

การเชื่อมต่อก่อนหน้า

สร้างรอยบากที่ด้านบนของบล็อกเพื่อให้เชื่อมต่อกันเป็นกองๆ ได้ ทั้งหมด

การบล็อกที่มีการเชื่อมต่อก่อนหน้าจะไม่สามารถเชื่อมต่อเอาต์พุตได้

JSON

ไม่ได้พิมพ์:

{
  ...,
  "previousStatement": null,
}

ตัวพิมพ์ (หายาก):

{
  "previousStatement": "Action",
  ...
}

JavaScript

ไม่ได้พิมพ์:

this.setPreviousStatement(true);  // false implies no previous connector, the default

พิมพ์ (หายาก):

this.setPreviousStatement(true, 'Action');

บล็อกเอาต์พุต

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

JSON

ไม่ได้พิมพ์:

{
  // ...,
  "output": null,
}

พิมพ์แล้ว:

{
  // ...,
  "output": "Number",
}

JavaScript

ไม่ได้พิมพ์:

init: function() {
  // ...
  this.setOutput(true);
}

พิมพ์แล้ว:

init: function() {
  // ...
  this.setOutput(true, 'Number');
}

การบล็อกที่มีเครื่องมือเชื่อมต่อเอาต์พุตจะไม่มีรอยบากข้อความก่อนหน้า

บล็อกอินพุต

บล็อกมีอินพุตอย่างน้อย 1 รายการ โดยที่แต่ละรายการมีลําดับ ฟิลด์ และอาจสิ้นสุดด้วยการเชื่อมต่อ ประเภทของอินพุตในตัว

  • อินพุตค่า: เชื่อมต่อกับการเชื่อมต่อเอาต์พุตของ บล็อกค่า บล็อก math_arithmetic (การเพิ่ม การลบ) คือ ตัวอย่างบล็อกที่มีอินพุต 2 ค่า
  • อินพุตใบแจ้งยอด: เชื่อมต่อกับ การเชื่อมต่อก่อนหน้าของบล็อกคำสั่ง ส่วนที่ซ้อนกันของลูปประเภทคำสั่งเป็นตัวอย่างของอินพุตคำสั่ง
  • อินพุตจำลอง: ไม่มีการเชื่อมต่อแบบบล็อก ทำหน้าที่เหมือนบรรทัดใหม่เมื่อ มีการกำหนดค่าการบล็อกให้ใช้อินพุตค่าภายนอก
  • อินพุตแถวสุดท้าย: ไม่มีการเชื่อมต่อแบบบล็อกและทำหน้าที่เหมือน ขึ้นบรรทัดใหม่

นอกจากนี้ คุณยังสร้างอินพุตที่กำหนดเองเพื่อรองรับ การแสดงผล

รูปแบบ JSON และ JavaScript API ใช้โมเดลที่ต่างกันเล็กน้อยในการอธิบาย ข้อมูลของตนเอง

อินพุตและช่องในรูปแบบ JSON

บล็อกที่กำหนดโดย JSON มีโครงสร้างเป็นลำดับของการแทรกสอด สตริงข้อความ ( message0, message1, ...) โดยที่โทเค็นการประมาณค่าแต่ละรายการ (%1, %2, ...) คือช่องหรือจุดสิ้นสุดของอินพุต (ซึ่งก็คือที่ที่เครื่องมือเชื่อมต่ออินพุต ภายในข้อความ) ในอาร์เรย์ argsN ของ JSON ที่ตรงกัน รูปแบบนี้คือ ที่มีจุดมุ่งหมายเพื่อทำให้การปรับให้เป็นสากลเป็นเรื่องง่าย

JSON

{
  "message0": "set %1 to %2",
  "args0": [
    {
      "type": "field_variable",
      "name": "VAR",
      "variable": "item",
      "variableTypes": [""]
    },
    {
      "type": "input_value",
      "name": "VALUE"
    }
  ]
}

โทเค็นการประมาณค่าในช่วงต้องตรงกับอาร์เรย์ args0 ทั้งหมด: ไม่ซ้ำ ไม่มีการละเว้น โทเค็นอาจมีในลำดับใดก็ได้ ซึ่งช่วยให้ ภาษาเพื่อเปลี่ยนเลย์เอาต์ของบล็อก

ข้อความด้านข้างของโทเค็นการประมาณค่าในช่วงจะถูกตัดช่องว่าง ข้อความที่ใช้อักขระ % (เช่น เมื่อพูดถึงเปอร์เซ็นต์) ควรใช้ %% เพื่อไม่ให้ตีความเป็นโทเค็นการประมาณค่า

ลำดับของอาร์กิวเมนต์และประเภทอาร์กิวเมนต์จะกำหนดรูปร่างของอาร์กิวเมนต์ บล็อก การเปลี่ยนสตริงใดสตริงหนึ่งอาจเปลี่ยนเลย์เอาต์ของบล็อกโดยสิ้นเชิง สำคัญมากโดยเฉพาะในภาษาที่มีลำดับคำต่างกัน กว่าภาษาอังกฤษ พิจารณาภาษาสมมติที่ "set %1 to %2" (ตามที่ใช้ ในตัวอย่างด้านบน) จะต้องกลับกันเพื่อระบุว่าเป็น "put %2 in %1" กำลังเปลี่ยน สตริงนี้ (และส่วนที่เหลือของ JSON ไม่ได้แตะ) จะส่งผลให้เกิดการบล็อกต่อไปนี้

เปลี่ยนลำดับของช่องโดยอัตโนมัติแบบบล็อก สร้างอินพุตจำลอง และเปลี่ยนจากอินพุตภายนอก เป็นอินพุตภายใน

Blockly ยังแทนที่อักขระขึ้นบรรทัดใหม่ (\n) ในข้อความโดยอัตโนมัติด้วย ที่มีอินพุตแถวสุดท้าย

JSON

{
  "message0": "set %1\nto %2",
  "args0": [
    {
      "type": "field_variable",
      "name": "VAR",
      "variable": "item",
      "variableTypes": [""]
    },
    {
      "type": "input_value",
      "name": "VALUE"
    }
  ]
}

อาร์กิวเมนต์

สตริงข้อความแต่ละรายการจะจับคู่กับอาร์เรย์ args ที่มีตัวเลขเดียวกัน สำหรับ ตัวอย่างเช่น message0 จะไปกับ args0 โทเค็นการประมาณค่า (%1, %2, ...) หมายถึงรายการในอาร์เรย์ args ออบเจ็กต์ทุกรายการมี สตริง type พารามิเตอร์ที่เหลือจะแตกต่างกันไปตามประเภท ดังนี้

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

ออบเจ็กต์ทุกรายการอาจมีช่อง alt ด้วย ในกรณีที่ Blockly ไม่ จดจำ type ของวัตถุดังกล่าว จะมีการใช้ออบเจ็กต์ alt แทนที่ สำหรับ ตัวอย่างเช่น ถ้าเพิ่มฟิลด์ใหม่ชื่อ field_time ลงใน Blockly จะบล็อกโดยใช้ ฟิลด์นี้อาจใช้ alt เพื่อกำหนด field_input สำรองสำหรับเวอร์ชันเก่า ของ Blockly:

JSON

{
  "message0": "sound alarm at %1",
  "args0": [
    {
      "type": "field_time",
      "name": "TEMPO",
      "hour": 9,
      "minutes": 0,
      "alt":
        {
          "type": "field_input",
          "name": "TEMPOTEXT",
          "text": "9:00"
        }
    }
  ]
}

ออบเจ็กต์ alt อาจมีออบเจ็กต์ alt ของตัวเอง ซึ่งทำให้ทำเชนได้ สุดท้ายแล้ว หาก Blockly สร้างออบเจ็กต์ในอาร์เรย์ args0 ไม่ได้ (หลังจาก และพยายามข้ามออบเจ็กต์ alt) ออบเจ็กต์นั้นก็จะถูกข้าม

ระบบจะเพิ่มอินพุตจำลองที่ท้ายบล็อกโดยอัตโนมัติหาก สตริง message ลงท้ายด้วยข้อความหรือช่องที่อินพุตไม่ได้อยู่ ดังนั้น ถ้าอินพุตสุดท้ายในบล็อกเป็นอินพุตจำลอง อินพุตอาจถูกตัดออก อาร์เรย์ args และไม่จำเป็นต้องมีการประมาณค่าในช่วง message การเพิ่มอินพุตจำลองอัตโนมัติ ช่วยให้นักแปลสามารถเปลี่ยน message โดยไม่ต้องแก้ไข JSON ที่เหลือ ดูตัวอย่างของ "set %1 to %2" (ไม่มีอินพุตจำลอง) และ "put %2 in %1" (เพิ่มอินพุตจำลอง) ก่อนหน้านี้ในหน้านี้

implicitAlign0

ในบางกรณีที่พบไม่บ่อยนัก อินพุตจำลองต่อท้ายที่สร้างขึ้นโดยอัตโนมัติจะต้องอยู่ในแนวเดียวกัน ไปยัง "RIGHT" หรือ "CENTRE" ค่าเริ่มต้นหากไม่ได้ระบุคือ "LEFT"

ในตัวอย่างด้านล่าง message0 คือ "send email to %1 subject %2 secure %3" และ Blockly จะเพิ่มอินพุตจำลองสำหรับแถวที่สามโดยอัตโนมัติ การเกริ่นนำ implicitAlign0 ไปยัง "RIGHT" บังคับให้แถวนี้อยู่ในแนวขวา ช่วงเวลานี้ การจัดข้อความจะใช้กับอินพุตทั้งหมดที่ไม่ได้กำหนดไว้อย่างชัดเจนใน JSON คำจำกัดความแบบบล็อก ซึ่งรวมถึงอินพุตแถวสุดท้ายที่แทนที่อักขระขึ้นบรรทัดใหม่ ('\n') ในข้อความ นอกจากนี้ยังมีพร็อพเพอร์ตี้ lastDummyAlign0 ที่เลิกใช้งานแล้วด้วย ที่มีลักษณะการทำงานเดียวกันกับ implicitAlign0

เมื่อออกแบบบล็อกสำหรับ RTL (อาหรับและฮีบรู) จะกลับด้านซ้ายและขวา ดังนั้น "RIGHT" จะปรับช่องให้ชิดขอบซ้าย

message1, args1, implicitAlign1

บล็อกบางบล็อกจะถูกแบ่งเป็น 2 ส่วนหรือมากกว่านั้นแยกกันโดยธรรมชาติ พิจารณาบล็อกการทำซ้ำนี้ซึ่งมี 2 แถว

หากมีการอธิบายการบล็อกนี้ด้วยข้อความเดียว พร็อพเพอร์ตี้ message0 จะเป็น "repeat %1 times %2 do %3" สตริงนี้ไม่เหมาะกับนักแปล การอธิบายความหมายของการแทนที่ %2 นั้นเป็นเรื่องยาก หุ่นจำลอง %2 อาจไม่สามารถป้อนข้อมูลได้ในบางภาษา และอาจมี บล็อกที่ต้องการแชร์ข้อความของแถวที่สอง วิธีการที่ดีกว่า มีไว้สำหรับ JSON เพื่อใช้ข้อความและพร็อพเพอร์ตี้อาร์กิวเมนต์มากกว่า 1 รายการ:

JSON

{
  "type": "controls_repeat_ext",
  "message0": "repeat %1 times",
  "args0": [
    {"type": "input_value", "name": "TIMES", "check": "Number"}
  ],
  "message1": "do %1",
  "args1": [
    {"type": "input_statement", "name": "DO"}
  ],
  "previousStatement": null,
  "nextStatement": null,
  "colour": 120
}

กำหนดพร็อพเพอร์ตี้ message, args และ implicitAlign ได้ไม่จำกัดจำนวน ในรูปแบบ JSON เริ่มต้นด้วย 0 และเพิ่มตามลำดับ โปรดทราบว่า Block Factory ไม่สามารถแยกข้อความออกเป็นหลายส่วนได้ แต่ ด้วยตนเองก็ไม่ซับซ้อน

อินพุตและฟิลด์ใน JavaScript

JavaScript API รวมเมธอด append สำหรับอินพุตแต่ละประเภทดังต่อไปนี้

JavaScript

this.appendEndRowInput()
    .appendField('for each')
    .appendField('item')
    .appendField(new Blockly.FieldVariable());
this.appendValueInput('LIST')
    .setCheck('Array')
    .setAlign(Blockly.inputs.Align.RIGHT)
    .appendField('in list');
this.appendStatementInput('DO')
    .appendField('do');
this.appendDummyInput()
    .appendField('end');

วิธีการต่อท้ายแต่ละวิธีสามารถใช้สตริงตัวระบุ ซึ่งใช้โดยโปรแกรมสร้างโค้ด จำลอง และอินพุตแถวสุดท้ายแทบจะไม่จำเป็นต้องมีการอ้างอิงและมักจะมีตัวระบุยังคงอยู่ ไม่ได้ตั้งค่า

JavaScript API ยังรวมเมธอด appendInput ทั่วไปสําหรับการเพิ่มต่อท้ายด้วย อินพุตที่กำหนดเอง โปรดทราบว่าในกรณีนี้ ตัวระบุควร ไปยังตัวสร้างของอินพุตที่กำหนดเองได้โดยตรง

JavaScript

this.appendInput(new MyCustomInput('INPUT_NAME'))
    .appendField('an example label')

เมธอด appendInput ทั้งหมด (ทั้งแบบทั่วไปและไม่ใช่รายการทั่วไป) จะแสดงผลลัพธ์ ออบเจ็กต์อินพุตเพื่อให้กำหนดค่าเพิ่มเติมได้โดยใช้การผูกเมธอด เรียบร้อย เป็นวิธีที่มีในตัว 3 วิธีในการกำหนดค่าอินพุต

setCheck

JavaScript

input.setCheck('Number');

ฟังก์ชันที่ไม่บังคับนี้ใช้สำหรับตรวจสอบประเภทอินพุตที่เชื่อมต่อ หากได้รับ อาร์กิวเมนต์ที่มีค่าเป็น Null ซึ่งเป็นค่าเริ่มต้น อินพุตนี้สามารถเชื่อมต่อกับการบล็อกใดก็ได้ โปรดดูรายละเอียดในการตรวจสอบประเภท

setAlign

JavaScript

input.setAlign(Blockly.inputs.Align.RIGHT);

ระบบใช้ฟังก์ชันที่ไม่บังคับนี้ในการจัดแนวช่อง (ดูด้านล่าง) มี 3 แบบ ค่าที่อธิบายตัวเองซึ่งอาจส่งผ่านเป็นอาร์กิวเมนต์ในฟังก์ชันนี้ได้ Blockly.inputs.Align.LEFT, Blockly.inputs.Align.RIGHT และ Blockly.inputs.Align.CENTER

เมื่อออกแบบบล็อกสำหรับ RTL (อาหรับและฮีบรู) จะกลับด้านซ้ายและขวา ดังนั้น Blockly.inputs.Align.RIGHT จะปรับช่องให้ชิดขอบซ้าย

appendField

เมื่อสร้างอินพุตและต่อท้ายบล็อกด้วย appendInput แล้ว 1 รายการ คุณเลือกที่จะเพิ่มช่องจำนวนเท่าใดก็ได้ในอินพุต ฟิลด์เหล่านี้ มักจะใช้เป็นป้ายกำกับเพื่ออธิบายว่าอินพุตแต่ละรายการมีไว้เพื่ออะไร

JavaScript

input.appendField('hello');

องค์ประกอบฟิลด์ที่เรียบง่ายที่สุดคือข้อความ แบบแผนของ Blockly คือการใช้ทั้งหมด ข้อความตัวพิมพ์เล็ก ยกเว้นชื่อเฉพาะ (เช่น Google, SQL)

แถวอินพุตจะมีองค์ประกอบช่องกี่รายการก็ได้ หลาย appendField อาจเชื่อมโยงการโทรไว้ด้วยกัน เพื่อเพิ่มฟิลด์หลายฟิลด์ แถวอินพุต

JavaScript

input.appendField('hello')
     .appendField(new Blockly.FieldLabel('Neil', 'person'));

จริงๆ แล้ว การเรียก appendField('hello') เป็นทางลัดสำหรับการใช้ ตัวสร้าง FieldLabel: appendField(new Blockly.FieldLabel('hello')) เวลาเดียวที่ผู้ใช้จะใช้ตัวสร้างคือเมื่อระบุ ชื่อคลาสเพื่อให้ข้อความสามารถจัดสไตล์โดยใช้กฎ CSS

แบบอินไลน์เทียบกับภายนอก

บล็อกอินพุตอาจแสดงผลเป็นอินพุตภายนอกหรือภายใน

คําจํากัดความของบล็อกสามารถระบุบูลีนที่ไม่บังคับซึ่งจะควบคุมว่าอินพุต ว่าอยู่ในบรรทัดหรือไม่ หากเป็น false ค่าที่ป้อนจะเป็นข้อมูลภายนอก (เช่น บล็อกด้านซ้าย) หากเป็น true ข้อมูลที่ป้อนจะอยู่ในบรรทัด (เช่น บล็อกขวาด้านบน)

JSON

{
  // ...,
  "inputsInline": true
}

JavaScript

init: function() {
  // ...
  this.setInputsInline(true);
}

หากไม่ได้กำหนดไว้ Blockly จะใช้วิธีการบางอย่างเพื่อคาดเดาว่าโหมดใดเป็นโหมดใด ดีที่สุด สมมติว่า Blockly เลือกเหมาะสมแล้ว ไม่ต้องระบุฟิลด์นี้ ดีกว่า เนื่องจากการแปลภาษาอื่นสามารถ โหมดต่างๆ ดูตัวอย่าง JSON ของ "set %1 to %2" (อินพุตภายนอก) และ "put %2 in %1" (อินพุตในบรรทัด) ก่อนหน้านี้ในหน้านี้

ใช้อินพุตแบบอินไลน์เมื่อบล็อกมีแนวโน้มว่าจะมีอินพุตเล็กๆ เช่น ตัวเลข ผู้ใช้สามารถสลับตัวเลือกนี้ผ่านทางเมนูตามบริบทได้ หากcollapse เปิดใช้การกำหนดค่าอยู่ (ค่าเริ่มต้นคือ true ถ้ากล่องเครื่องมือมีหมวดหมู่อยู่)

ช่อง

ช่องจะกำหนดองค์ประกอบ UI ส่วนใหญ่ภายในบล็อก ซึ่งรวมถึง ป้ายกำกับสตริง รูปภาพ และอินพุตสำหรับ ข้อมูล Litral เช่น สตริงและตัวเลข ตัวอย่างที่ง่ายที่สุดคือบล็อก math_number ซึ่งใช้ field_input เพื่อให้ผู้ใช้พิมพ์ตัวเลขได้

ช่องจะเพิ่มต่อท้ายบล็อกโดยใช้ appendField.

Blockly มอบฟิลด์ในตัวมากมาย รวมถึงอินพุตข้อความ ตัวเลือกสี และรูปภาพ คุณยังสร้างช่องของคุณเองได้อีกด้วย

→ ข้อมูลเพิ่มเติมเกี่ยวกับช่องในตัว

→ ข้อมูลเพิ่มเติมเกี่ยวกับการสร้างช่องที่กำหนดเอง

ไอคอน

ไอคอนกำหนดองค์ประกอบ UI บนบล็อกที่มีพื้นผิว "meta" ข้อมูลเกี่ยวกับ บล็อก

มีไอคอนต่อท้ายบล็อกโดยใช้ addIcon

Blockly มีไอคอนในตัวมากมาย รวมถึงไอคอนความคิดเห็น และไอคอนคำเตือน คุณสามารถสร้างไอคอนของตัวเองได้เช่นกัน

→ ข้อมูลเพิ่มเติมเกี่ยวกับการสร้างไอคอนที่กำหนดเอง

เคล็ดลับเครื่องมือ

เคล็ดลับเครื่องมือนำเสนอความช่วยเหลือได้ทันทีเมื่อผู้ใช้เลื่อนเมาส์ไปวางบนบล็อก หากข้อความยาว ระบบจะตัดข้อความอัตโนมัติ

JSON

{
  // ...,
  "tooltip": "Tooltip text."
}

JavaScript

init: function() {
  this.setTooltip("Tooltip text.");
}

ใน JavaScript API สามารถระบุเคล็ดลับเครื่องมือเป็นฟังก์ชันแทนฟังก์ชัน สตริงแบบคงที่ วิธีนี้จะทำให้สามารถรับความช่วยเหลือแบบไดนามิก ดู math_arithmetic สำหรับ ตัวอย่างของเคล็ดลับเครื่องมือที่เปลี่ยนแปลงไปตามตัวเลือกเมนูแบบเลื่อนลง ที่เลือก

JavaScript

Blockly.Blocks['math_arithmetic'] = {
  init: function() {
    // ...

    // Assign 'this' to a variable for use in the tooltip closure below.
    var thisBlock = this;
    this.setTooltip(function() {
      var mode = thisBlock.getFieldValue('OP');
      var TOOLTIPS = {
        'ADD': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_ADD,
        'MINUS': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_MINUS,
        'MULTIPLY': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_MULTIPLY,
        'DIVIDE': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_DIVIDE,
        'POWER': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_POWER
      };
      return TOOLTIPS[mode];
    });
  }
};

การใช้ JavaScript API ทำให้บล็อกสามารถระบุฟังก์ชันแทนแบบคงที่ สตริง ซึ่งแสดงสตริงเคล็ดลับเครื่องมือ วิธีนี้จะทำให้สามารถใช้เคล็ดลับเครื่องมือแบบไดนามิกได้ ดูตัวอย่างได้ที่ math_arithmetic

ปรับแต่งเฉพาะคน

คุณจะปรับแต่งรูปลักษณ์ของเคล็ดลับเครื่องมือได้โดยระบุการแสดงผลที่กำหนดเอง สร้างฟังก์ชันที่ยอมรับพารามิเตอร์ 2 ตัวดังนี้

  • องค์ประกอบ <div> ที่คุณจะแสดงผลเนื้อหา
  • อย่างที่สองคือ องค์ประกอบจริงที่จะถูกนำเมาส์ไปวาง ซึ่งคุณจะแสดง เคล็ดลับเครื่องมือสำหรับ

ในส่วนเนื้อหาของฟังก์ชัน คุณสามารถแสดงผลเนื้อหาใดก็ได้ที่ต้องการลงใน div หากต้องการดูสตริงเคล็ดลับเครื่องมือที่กำหนดไว้บนบล็อกที่มีเมาส์วางอยู่ คุณสามารถ โทรหา Blockly.Tooltip.getTooltipOfObject(element); โดยที่ element คือ พารามิเตอร์ที่ 2 ด้านบน

ขั้นตอนสุดท้าย ให้ลงทะเบียนฟังก์ชันนี้เพื่อให้ Blockly เรียกใช้ได้ในเวลาที่เหมาะสม ดังนี้

Blockly.Tooltip.setCustomTooltip(yourFnHere);

ตัวอย่างเช่น ดูที่ การสาธิตเคล็ดลับเครื่องมือที่กำหนดเอง

URL ความช่วยเหลือ

การบล็อกอาจมีหน้าความช่วยเหลือที่เชื่อมโยงกับการบล็อก ฟีเจอร์นี้พร้อมใช้งานสำหรับ ผู้ใช้ Blockly for Web โดยการคลิกขวาที่บล็อกและเลือก "ความช่วยเหลือ" จากเมนูตามบริบท หากค่านี้เป็น null เมนูจะเป็นสีเทา

JSON

{
  // ...,
  "helpUrl": "https://en.wikipedia.org/wiki/For_loop"
}

JavaScript

init: function() {
  // ...
  this.setHelpUrl('https://en.wikipedia.org/wiki/For_loop');
}

การใช้ JavaScript API ทำให้บล็อกสามารถระบุฟังก์ชันแทนแบบคงที่ สตริงนี้ ซึ่งแสดงผลสตริง URL ดังนั้นจึงสามารถใช้ความช่วยเหลือแบบไดนามิกได้

Listener และเครื่องมือตรวจสอบการเปลี่ยนแปลง

การบล็อกอาจมีการเปลี่ยนแปลงฟังก์ชัน Listener ซึ่งเรียกใช้เมื่อมีการเปลี่ยนแปลงใดๆ กับฟังก์ชัน พื้นที่ทำงาน (รวมถึงรายการที่ไม่เกี่ยวข้องกับการบล็อก) เป้าหมายเหล่านี้ใช้เพื่อ กำหนดข้อความเตือนของการบล็อก หรือการแจ้งเตือนผู้ใช้ที่คล้ายกันนอกกรอบ Google Workspace ได้อย่างเต็มประสิทธิภาพ

โดยระบบจะเพิ่มฟังก์ชันดังกล่าวโดยเรียกใช้ setOnChange พร้อมกับฟังก์ชัน ซึ่งสามารถดำเนินการได้ ระหว่าง init หรือผ่านส่วนขยาย JSON หากต้องการใช้ ในทุกแพลตฟอร์ม

JSON

{
  // ...,
  "extensions":["warning_on_change"],
}

Blockly.Extensions.register('warning_on_change', function() {
  // Example validation upon block change:
  this.setOnChange(function(changeEvent) {
    if (this.getInput('NUM').connection.targetBlock()) {
      this.setWarningText(null);
    } else {
      this.setWarningText('Must have an input block.');
    }
  });
});

JavaScript

Blockly.Blocks['block_type'] = {
  init: function() {
    // Example validation upon block change:
    this.setOnChange(function(changeEvent) {
      if (this.getInput('NUM').connection.targetBlock()) {
        this.setWarningText(null);
      } else {
        this.setWarningText('Must have an input block.');
      }
    });
  }
}

ระบบจะเรียกใช้ฟังก์ชันที่ส่งผ่าน เหตุการณ์การเปลี่ยนแปลง ภายในฟังก์ชัน this จะหมายถึงอินสแตนซ์บล็อก

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

ดูcontrols_flow_statements logic_compare และprocedures_ifreturn สำหรับตัวอย่าง

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

ตัวเปลี่ยนรูปแบบ

Mutator ช่วยให้บล็อกขั้นสูงเปลี่ยนรูปร่างได้ ซึ่งมักเป็นผลมาจาก ผู้ใช้ที่เปิดกล่องโต้ตอบเพื่อเพิ่ม นำออก หรือจัดเรียงคอมโพเนนต์ใหม่ ผู้เปลี่ยนแปลงอาจเป็น ที่เพิ่มผ่าน JSON ด้วยคีย์ mutator

JSON

{
  // ...,
  "mutator":"if_else_mutator"
}

การกำหนดค่าต่อการบล็อก

อินสแตนซ์บล็อกมีพร็อพเพอร์ตี้จำนวนมากที่กำหนดค่าการทำงาน ผู้ใช้รายนั้น ซึ่งใช้เพื่อจํากัดพื้นที่ทำงานให้แสดง ของโดเมน (เช่น มีกิจกรรม "เริ่มต้น" 1 รายการ) หรือโฟกัส ความพยายามของผู้ใช้ (เช่น บทแนะนำ)

สถานะที่ลบได้

block.setDeletable(false);

เมื่อตั้งค่าเป็น "เท็จ" ผู้ใช้จะไม่สามารถลบการบล็อกได้ ค่าเริ่มต้นการบล็อก ให้ลบบนพื้นที่ทำงานที่แก้ไขได้

ระบบอาจลบการบล็อกใดๆ (แม้แต่การบล็อกที่ยกเลิกไม่ได้) โดยใช้โปรแกรม ดังนี้

block.dispose();

สถานะที่แก้ไขได้

block.setEditable(false);

เมื่อตั้งค่าเป็น "เท็จ" ผู้ใช้จะเปลี่ยนช่องของบล็อกไม่ได้ (เช่น เมนูแบบเลื่อนลงและการป้อนข้อความ) บล็อกค่าเริ่มต้นเป็นให้แก้ไขได้ใน Google Workspace ได้อย่างเต็มประสิทธิภาพ

สถานะเคลื่อนย้ายได้

block.setMovable(false);

เมื่อตั้งค่าเป็น "เท็จ" ผู้ใช้จะย้ายการบล็อกโดยตรงไม่ได้ CANNOT TRANSLATE บล็อกที่ย้ายไม่ได้ซึ่งเป็นรายการย่อยของบล็อกอื่นไม่สามารถตัดการเชื่อมต่อจาก บล็อกนั้น แต่จะย้ายไปตามผู้เผยแพร่โฆษณาระดับบนสุด บล็อก ค่าเริ่มต้นเป็นย้ายได้ในพื้นที่ทำงานที่แก้ไขได้

คุณสามารถย้ายบล็อกใดๆ (แม้แต่ที่เคลื่อนย้ายไม่ได้) แบบเป็นโปรแกรมได้เมื่ออยู่ใน Google Workspace ได้อย่างเต็มประสิทธิภาพ

block.moveBy(dx, dy)

ตำแหน่งเริ่มต้นของบล็อกในพื้นที่ทำงานจะมีค่าเริ่มต้นเป็น (0, 0)

บล็อกเน็ตมือถือ

this.data = '16dcb3a4-bd39-11e4-8dfc-aa07a5b093db';

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

โดยมักใช้เพื่อเชื่อมโยงการบล็อกกับทรัพยากรภายนอก

เมื่อเรียงลำดับเป็น JSON ข้อมูลจะจัดเก็บเป็นพร็อพเพอร์ตี้ระดับบนสุดในบล็อก ดังนี้

{
  "type": "my_block",
  "data": "16dcb3a4-bd39-11e4-8dfc-aa07a5b093db",
  // etc..
}

เมื่อเรียงลำดับเป็น XML (ระบบการเรียงอันดับแบบ iceboxed แบบเก่า) สตริงข้อมูล จัดเก็บไว้ในแท็ก <data></data> ภายในบล็อก:

<block type="my_block">
  <data>16dcb3a4-bd39-11e4-8dfc-aa07a5b093db</data>
  <!-- etc... -->
</block>

การทำลาย

บล็อกมีฮุก destroy ซึ่งจะเรียกใช้เมื่อลบออกจาก Google Workspace ได้อย่างเต็มประสิทธิภาพ การตั้งค่านี้ใช้เพื่อทำลายโมเดลข้อมูลสนับสนุน/ภายนอกได้ ทรัพยากรที่เชื่อมโยงกับการบล็อกที่ไม่จำเป็นอีกต่อไป

JSON

{
  // ...,
  "extensions":["destroy"],
}

Blockly.Extensions.registerMixin('destroy', {
  destroy: function() {
    this.myResource.dispose();
  }
});

JavaScript

Blockly.Blocks['block_type'] = {
  destroy: function() {
    this.myResource.dispose();
  }
}

ระบบจะเรียกเมธอด destroy หลังจากกำจัดระดับบนสุดของการบล็อกแล้ว แต่ ก่อนมีการกำจัดองค์ประกอบย่อยหรือฟิลด์ย่อยๆ

เมนูบริบท

โดยค่าเริ่มต้น การบล็อกจะมีเมนูตามบริบทที่คลิกขวาซึ่งอนุญาตให้ผู้ใช้ดำเนินการ เช่น เพิ่มความคิดเห็น หรือทำสำเนาบล็อก

คุณสามารถปิดเมนูตามบริบทของแต่ละบล็อกได้ดังนี้

block.contextMenu = false;

คุณปรับแต่งตัวเลือกที่แสดงในเมนูได้ด้วย เมื่อต้องการปรับแต่งเมนูสำหรับ บล็อกทั้งหมด โปรดดู เอกสารประกอบเกี่ยวกับเมนูบริบท ในการปรับแต่งเมนูสำหรับแต่ละบล็อก คุณสามารถปรับใช้ customContextMenu ฟังก์ชันนี้ใช้อาร์เรย์ของตัวเลือกเมนูและ ที่มีอยู่ ซึ่งหมายความว่าคุณสามารถเพิ่มและนำรายการต่างๆ ออกได้

ตัวเลือกเมนูแต่ละรายการเป็นออบเจ็กต์ที่มีพร็อพเพอร์ตี้ 3 รายการดังนี้

  • text เป็นข้อความที่แสดง
  • enabled เป็นบูลีน เมื่อปิดใช้ ตัวเลือกจะแสดงแต่เป็นสีเทา ข้อความ
  • callback คือฟังก์ชันที่จะเรียกใช้เมื่อคลิกตัวเลือก