โครงสร้างบล็อกใน JavaScript

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

นอกจากนี้ คุณยังกําหนดอินพุต ฟิลด์ และการเชื่อมต่อใน JSON ได้ด้วย

ต่อท้ายอินพุต

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

JavaScript

init: function() {
  // ...
  this.appendEndRowInput()
      .appendField('for each')
      .appendField('item')
      .appendField(new Blockly.FieldVariable(), 'VAR');
  this.appendValueInput('LIST')
      .setCheck('Array')
      .setAlign(Blockly.inputs.Align.RIGHT)
      .appendField('in list');
  this.appendStatementInput('DO')
      .appendField('do');
  this.appendDummyInput()
      .appendField('end');
}

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

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

JavaScript

init: function() {
  // ...
  this.appendInput(new MyCustomInput('INPUT_NAME'))
      .appendField('an example label')
}

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

เพิ่มช่อง

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

JavaScript

init: function() {
  // ...
  this.appendDummyInput()
      .appendField('hello');
}

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

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

JavaScript

init: function() {
  // ...
  this.appendDummyInput()
      .appendField('hello')
      .appendField(new Blockly.FieldLabel('Neil', 'person'));
}

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

การตรวจสอบการเชื่อมต่อ

JavaScript

init: function() {
  // ...
  this.appendValueInput('NUM')
      .setCheck('Number');
}

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

จัดแนวฟิลด์

JavaScript

init: function() {
  // ...
  this.appendValueInput('LIST')
      .appendField('in list')
      .setAlign(Blockly.inputs.Align.RIGHT);
}

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

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