การขยายช่องที่มีอยู่

ในการขยายฟิลด์ที่มีอยู่ คุณต้องคลาสย่อยของฟิลด์ในตัว (เช่น FieldTextInput, FieldColour) แล้วแก้ไขบางส่วนของฟิลด์ให้เหมาะกับความต้องการของคุณ ข้อมูลบางส่วนในช่องที่คุณแก้ไขได้มีดังนี้

หากต้องการสร้างช่องที่กำหนดเองที่ไม่ต้องใช้ลักษณะการทำงานจากช่องในตัว คุณควรคลาสย่อย Field

ส่วนขยายทั่วไป

ช่องที่กำหนดเองส่วนใหญ่จะมี 1 ใน 3 ประเภทต่อไปนี้

  • การป้อนข้อความ: หากต้องการให้ผู้ใช้พิมพ์ลงในช่องของคุณ คุณควรขยาย FieldTextInput
  • หมายเลข: หากต้องการเก็บหมายเลข คุณควรขยายเวลาอีก FieldNumber
  • เมนูแบบเลื่อนลง: หากต้องการสร้างเมนูแบบเลื่อนลง แต่ต้องการเก็บโมเดลอื่นที่ไม่ใช่สตริงหรือโมเดลรูปภาพเริ่มต้น คุณควรขยายระยะเวลา FieldDropdown
    • ข้อควรระวัง: ก่อนขยายเวลา FieldDropdown โปรดตรวจสอบว่าตัวเลือกการปรับแต่งของช่องแบบเลื่อนลงไม่สามารถตอบสนองความต้องการของคุณได้

ในบางกรณีคุณอาจต้องการขยายฟิลด์ประเภทอื่น เช่น FieldLabelSerializable ขยาย FieldLabel

คลาสย่อย

import * as Blockly from 'blockly';

export class MyCustomTextField extends Blockly.FieldTextInput {

  constructor(value, validator, config) {
    super(value, validator, config);
  }
}

ตัวสร้างสำหรับคลาสย่อยของช่องดูคล้ายกับตัวสร้างสำหรับช่องที่กำหนดเองมาก โดยทั่วไปแล้ว ลายเซ็นของตัวสร้างย่อย ควรตรงกับลายเซ็นของผู้สร้างย่อย

JSON และการลงทะเบียน

นอกจากนี้คุณควรลงทะเบียนช่องนี้เพียงครั้งเดียว

Blockly.fieldRegistry.register('my_custom_text_field', MyCustomTextField);

และระบุการใช้งาน fromJson ในชั้นเรียนเพื่อให้ทำงานกับรูปแบบ JSON ดังนี้

static fromJson(options) {
  const value = Blockly.utils.parsing.replaceMessageReferences(options.value);
  return new MySubclassName(value);
}

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการลงทะเบียนช่อง โปรดดูที่ส่วน JSON และการลงทะเบียนในการสร้างช่องที่กำหนดเอง