ในการขยายฟิลด์ที่มีอยู่ คุณต้องคลาสย่อยของฟิลด์ในตัว (เช่น FieldTextInput
, FieldColour
) แล้วแก้ไขบางส่วนของฟิลด์ให้เหมาะกับความต้องการของคุณ
ข้อมูลบางส่วนในช่องที่คุณแก้ไขได้มีดังนี้
- ผู้แก้ไข
- โฆษณา Display บนบล็อก
- ข้อความที่โฆษณาแสดง
หากต้องการสร้างช่องที่กำหนดเองที่ไม่ต้องใช้ลักษณะการทำงานจากช่องในตัว คุณควรคลาสย่อย 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 และการลงทะเบียนในการสร้างช่องที่กำหนดเอง