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

ในเดือนกรกฎาคม 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

Blockly Core จะไม่เรียกใช้ฟังก์ชัน 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 จะจัดการสิ่งต่อไปนี้โดยอัตโนมัติ

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

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

• การตรวจสอบค่า (doClassValidation_)
• ข้อความฟิลด์ (getText)
• UI ของฟิลด์

หมายเหตุ: เราขอแนะนำให้คุณเปลี่ยนการเรียกใช้ setText เป็นการเรียกใช้ setValue เนื่องจาก setValue รองรับการตรวจสอบ แต่ setText ไม่รองรับ

การอัปเกรดที่แนะนำ

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

SERIALIZABLE

ดูข้อมูลเพิ่มเติมเกี่ยวกับพร็อพเพอร์ตี้ 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_
• การแสดงผลฟิลด์
• เชื่อมโยงเคล็ดลับและแสดงเหตุการณ์ของเอดิเตอร์

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

• การเพิ่มองค์ประกอบ DOM อื่นๆ (initView)
• การเพิ่ม การเชื่อมโยงเหตุการณ์เพิ่มเติม (bindEvents_)
• การทิ้งการเชื่อมโยงเหตุการณ์ (dispose)

สำคัญ: การสร้าง DOM ทั้งหมดควรทำภายใน initView เนื่องจากมีประสิทธิภาพมากที่สุด โปรดพิจารณาปรับโครงสร้างใหม่หากคุณมีการสร้าง DOM ภายใน คอนสตรัคเตอร์ setText, setValue หรือ render_

onMouseDown_

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

กลายเป็น

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

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

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

setValue

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

text_

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

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

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

หมายเหตุ: ก่อนขอความช่วยเหลือในการอัปเกรด โปรดพยายามอัปเกรดฟิลด์ ด้วยตนเองโดยใช้ข้อมูลที่ให้ไว้

สิ่งที่ต้องระบุ

เมื่อขอรับความช่วยเหลือ คุณควรถามคำถามที่เฉพาะเจาะจง

ไม่แนะนำ: "ฟิลด์นี้มีปัญหาอะไร"

นอกจากนี้ เราไม่แนะนำให้ใช้ข้อความ "ช่วยฉันอัปเกรดฟิลด์นี้"

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

นอกจากนี้ คุณยังต้องจัดหาแหล่งข้อมูลให้แก่ผู้ที่ช่วยเหลือคุณด้วย คนอื่นๆ ควรใช้ไฟล์เหล่านี้ได้ง่าย

ไม่แนะนำ

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

แนะนำ

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

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

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

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