การอัปเกรดช่องที่กำหนดเอง

ในเดือนกรกฎาคม 2019 (รุ่น 2.20190722) มีการเพิ่ม API ช่องที่เข้ารหัสเพิ่มเติม โดยมีจุดประสงค์เพื่อให้ มีความเข้ากันได้แบบย้อนหลังมากที่สุดเท่าที่จะเป็นไปได้ ซึ่งหมายความว่าหากคุณสร้างช่องที่กำหนดเองก่อนเดือนกรกฎาคม 2019 ช่องนั้นยังคงมีแนวโน้มที่จะใช้งานได้ต่อไป ก่อนที่จะตัดสินใจว่าต้องอัปเกรดช่องที่กำหนดเองหรือไม่ คุณควรอ่านหัวข้อพื้นที่ที่เป็นอันตรายและทำการทดสอบอย่างละเอียดแก่ช่อง

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

พื้นที่อันตราย

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

Blockly.Field.register

ไม่ได้ลงทะเบียนฟิลด์ผ่าน Blockly.Field.register(); อีกต่อไป ตอนนี้มีเนมสเปซ fieldRegistry ที่จัดการการลงทะเบียนแล้ว

Blockly.Field.register('my_field_name', myFieldClass);

เป็น

Blockly.fieldRegistry.register('my_field_name', myFieldClass);

setText

ฟังก์ชัน setText ไม่ได้เรียกใช้ฟังก์ชัน setText อีกต่อไป ดังนั้นหากฟังก์ชัน setText ของคุณมีตรรกะ คุณจะต้องย้ายฟังก์ชันดังกล่าวไปไว้ในชุดฟังก์ชันการจัดการค่า ฟังก์ชัน getText และฟังก์ชันการแสดงผล (ทั้งนี้ขึ้นอยู่กับสิ่งที่ฟังก์ชัน setText กำลังทำอยู่)

CustomFields.UpgradeField.prototype.setText = function(newText) {
  // Do validation.
  if (typeof newText != 'string' || newText === this.text_) {
    return;
  }

  // Fire event.
  if (this.sourceBlock_ && Blockly.Events.isEnabled()) {
    Blockly.events.fire(new Blockly.Events.BlockChange(
        this.sourceBlock_, 'field', this.name, this.text_, newText
    ));
  }

  // Update text value.
  this.text_ = 'prefix' + newText;

  // Rerender.
  this.size_.width = 0;
};

เป็น

CustomFields.UpgradeField.prototype.doClassValidation_ = function(newValue) {
  if (typeof newValue != 'string') {
    return null;
  }
  return newValue;
};

CustomFields.UpgradeField.prototype.getText = function() {
  return  'prefix' + this.value_;
}

Blockly จะจัดการต่อไปนี้โดยอัตโนมัติ

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

คุณจะต้องจัดการสิ่งต่อไปนี้

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

แสดงได้จริง

ดูข้อมูลเพิ่มเติมเกี่ยวกับพร็อพเพอร์ตี้ EDITABLE และ SERIALIZABLE ได้ที่พร็อพเพอร์ตี้ที่แก้ไขได้และทําให้เป็นอนุกรมได้

CustomFields.UpgradeField.prototype.SERIALIZABLE = true;

คุณเพิกเฉยต่อคำเตือนด้านล่างได้ แต่คุณแก้ไขได้โดยกำหนดพร็อพเพอร์ตี้ SERIALIZABLE ดังนี้

Detected an editable field that was not serializable. Please define
SERIALIZABLE property as true on all editable custom fields. Proceeding
with serialization.

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

size_.width

this.size_.width = 0;

เป็น

this.isDirty_ = true;

คุณเพิกเฉยต่อคำเตือนด้านล่างได้ แต่คุณแก้ไขได้โดยการตั้งค่าพร็อพเพอร์ตี้ isDirty_ แทนพร็อพเพอร์ตี้ size_.width ดังนี้

Deprecated use of setting size_.width to 0 to rerender a field. Set
field.isDirty_ to true instead.

คำเตือนด้านบนหมายความว่า Blockly ตรวจพบว่าคุณใช้เมธอดเก่าในการแสดงผลช่องอีกครั้ง และต้องการให้คุณใช้เมธอดใหม่นี้

ดูข้อมูลเพิ่มเติมเกี่ยวกับพร็อพเพอร์ตี้ isDirty_ ได้ที่ isDirty_

init

ระบบได้สร้างฟังก์ชัน init เป็นฟังก์ชันเทมเพลตเพื่อลดโค้ดที่ซ้ำกันในคลาสย่อย

CustomFields.UpgradeField.prototype.init = function() {
  if (this.fieldGroup_) {
    // Already initialized once.
    return;
  }

  // Call superclass.
  CustomFields.UpgradeField.superClass_.init.call(this);

  // Create DOM elements.
  this.extraDom_ = Blockly.utils.dom.createSvgElement('image',
      {
        'height': '10px',
        'width': '10px'
      });
  this.extraDom_.setAttributeNS('http://www.w3.org/1999/xlink',
      'xlink:href', 'image.svg');
  this.extraDom_.style.cursor = 'pointer';
  this.fieldGroup_.appendChild(this.extraDom_);

  // Bind events.
  this.mouseOverWrapper_ =
    Blockly.browserEvents.bind(
        this.getClickTarget_(), 'mouseover', this, this.onMouseOver_);
  this.mouseOutWrapper_ =
    Blockly.browserEvents.bind(
        this.getClickTarget_(), 'mouseout', this, this.onMouseOut_);

  // Render.
  this.setValue(this.getValue());
};

เป็น

CustomFields.UpgradeField.prototype.initView = function() {
  CustomFields.UpgradeField.superClass_.initView.call(this);

  this.extraDom_ = Blockly.utils.dom.createSvgElement('image',
      {
        'height': '10px',
        'width': '10px'
      });
  this.extraDom_.setAttributeNS('http://www.w3.org/1999/xlink',
      'xlink:href', 'image.svg');
  this.extraDom_.style.cursor = 'pointer';
  this.fieldGroup_.appendChild(this.extraDom_);
};

CustomFields.UpgradeField.prototype.bindEvents_ = function() {
  CustomFields.UpgradeField.superClass_.bindEvents_.call(this);

  this.mouseOverWrapper_ =
    Blockly.bindEvent_(
        this.getClickTarget_(), 'mouseover', this, this.onMouseOver_);
  this.mouseOutWrapper_ =
    Blockly.bindEvent_(
        this.getClickTarget_(), 'mouseout', this, this.onMouseOut_);
};

ซึ่งหมายความว่าตอนนี้ Blockly จะจัดการสิ่งต่อไปนี้โดยอัตโนมัติ

  • กำลังตรวจสอบว่าได้เริ่มต้นช่องดังกล่าวแล้วหรือไม่
  • กำลังสร้าง fieldGroup_
  • การแสดงภาพฟิลด์
  • การเชื่อมโยงเคล็ดลับเครื่องมือและแสดงกิจกรรมของเครื่องมือแก้ไข

คุณจะต้องจัดการสิ่งต่อไปนี้

onMouseDown_

CustomFields.UpgradeField.prototype.onMouseDown_ = function(e) {
  // ...
};

เป็น

CustomFields.UpgradeField.prototype.showEditor_ = function() {
  // ...
}

เราขอแนะนำให้คุณลบล้างฟังก์ชัน showEditor_ เพื่อจัดการการคลิกเมาส์แทนฟังก์ชัน onMouseDown_ เนื่องจากอนุญาตให้อินพุตผ่านระบบท่าทางสัมผัสได้

ดูข้อมูลเพิ่มเติมเกี่ยวกับเอดิเตอร์ได้ที่เอดิเตอร์

setValue

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

text_

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับค่าของช่องเทียบกับข้อความของช่องได้ที่การวิเคราะห์ช่อง

การรับความช่วยเหลือเกี่ยวกับการอัปเกรด

ข้อมูลที่ต้องระบุ

เมื่อขอความช่วยเหลือ คุณควรถามคำถามที่เจาะจงต่อไปนี้

ไม่แนะนำ: "ช่องนี้มีอะไรผิดปกติ"

นอกจากนี้ยังไม่แนะนำ: "ช่วยฉันอัปเกรดช่องนี้"

แนะนำ: "ข้อความฟิลด์ไม่อัปเดตอย่างถูกต้อง"

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

ไม่แนะนำ

  • รูปภาพของโค้ด
  • โค้ดไม่สมบูรณ์

แนะนำ

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

ตำแหน่งที่โพสต์

โพสต์คำถามการอัปเกรดในฟอรัมนักพัฒนาซอฟต์แวร์บล็อก

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