कस्टम फ़ील्ड को अपग्रेड करना

जुलाई 2019 (रिलीज़ 2.20190722) में, ज़्यादा कोड वाले फ़ील्ड का एपीआई जोड़ा गया था. इसे इस तरह से डिज़ाइन किया गया है कि यह पुराने सिस्टम के साथ काम कर सके. इसका मतलब है कि अगर आपने जुलाई 2019 से पहले कोई कस्टम फ़ील्ड बनाया था, तो वह शायद काम करता रहेगा. यह तय करने से पहले कि आपके कस्टम फ़ील्ड को अपग्रेड करने की ज़रूरत है या नहीं, आपको खतरे वाले क्षेत्र सेक्शन को पढ़ना चाहिए. साथ ही, अपने फ़ील्ड की अच्छी तरह से जांच करनी चाहिए.

जुलाई 2019 से पहले, फ़ील्ड के बीच स्टैंडर्डाइजेशन नहीं था. इसलिए, डेवलपर को जिन बदलावों की ज़रूरत पड़ सकती है उन सभी को शामिल करना मुश्किल है. इस दस्तावेज़ में, अपग्रेड से जुड़े सभी संभावित बदलावों के बारे में बताया गया है. हालांकि, अगर इसमें आपकी ज़रूरत की कोई जानकारी नहीं है, तो कृपया अपग्रेड करने में मदद पाने से जुड़ा सेक्शन पढ़ें.

खतरे वाले इलाके

डेंजर एरिया, ऐसी जगहें होती हैं जहां एपीआई में बदलाव किया गया है. इससे आपके फ़ील्ड में गड़बड़ी हो सकती है.

Blockly.Field.register

अब Blockly.Field.register(); के ज़रिए फ़ील्ड रजिस्टर नहीं किए जाते. अब रजिस्ट्रेशन को मैनेज करने के लिए, fieldRegistry नेमस्पेस मौजूद है.

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

बन जाता है:

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

setText

अब Blockly कोर, 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 इन कामों को अपने-आप करता है:

  • यह कुकी यह जांच करती है कि नई वैल्यू, पुरानी वैल्यू से अलग है या नहीं.
  • वैल्यू अपडेट की जा रही है.
  • बदलाव से जुड़े इवेंट ट्रिगर करना.
  • फ़ील्ड को फिर से रेंडर किया जा रहा है.

आपको ये काम करने होंगे:

सुझाए गए अपग्रेड उन जगहों पर किए जाते हैं जहां फ़ील्ड एपीआई में बदलाव किया गया है. हालांकि, अगर आपको बदलाव नहीं करने हैं, तो भी आपका फ़ील्ड काम करता रहेगा.

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 प्रॉपर्टी तय नहीं की जाती, तब तक Blockly इस बारे में पक्का नहीं हो सकता. अगर आपने इस फ़ील्ड को नहीं बदला, तो सब कुछ ठीक से काम करेगा. साथ ही, आपका फ़ील्ड क्रम से लगाया जाएगा. हालांकि, आपको कंसोल की चेतावनियां मिलेंगी.

size_.width

this.size_.width = 0;

बन जाता है:

this.isDirty_ = true;

नीचे दी गई चेतावनी को अनदेखा किया जा सकता है. हालांकि, size_.width प्रॉपर्टी के बजाय isDirty_ प्रॉपर्टी सेट करके, इसे ठीक किया जा सकता है:

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

ऊपर दी गई चेतावनी का मतलब है कि Blockly को पता चला है कि फ़ील्ड को फिर से रेंडर करने के लिए, पुराने तरीके का इस्तेमाल किया जा रहा है. इसलिए, वह चाहता है कि आप नए तरीके का इस्तेमाल करें.

isDirty_ प्रॉपर्टी के बारे में ज़्यादा जानने के लिए, isDirty_ देखें.

init

init फ़ंक्शन को template function में बदल दिया गया है, ताकि सबक्लास में डुप्लीकेट कोड कम किया जा सके.

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_ फ़ंक्शन को ओवरराइड करें. ऐसा इसलिए, क्योंकि showEditor_ फ़ंक्शन से इनपुट को जेस्चर सिस्टम से पास होने की अनुमति मिलती है.onMouseDown_

एडिटर के बारे में ज़्यादा जानने के लिए, एडिटर लेख पढ़ें.

setValue

setValue फ़ंक्शन अब एक टेंप्लेट फ़ंक्शन है, ताकि सबक्लास में डुप्लीकेट कोड को कम किया जा सके. अगर आपके setValue फ़ंक्शन में लॉजिक शामिल है, तो उसे फिर से फ़ैक्टर करने पर विचार करें, ताकि वह वैल्यू हैंडलिंग में बताए गए वैल्यू हैंडलिंग पाथ के मुताबिक हो.

text_

हमारा सुझाव है कि आप अपने फ़ील्ड की text_ प्रॉपर्टी को सीधे तौर पर कभी भी ऐक्सेस या अपडेट न करें. इसके बजाय, अपने फ़ील्ड के ऐसे टेक्स्ट को ऐक्सेस करने के लिए getText फ़ंक्शन का इस्तेमाल करें जिसे उपयोगकर्ता पढ़ सकते हैं. साथ ही, अपने फ़ील्ड की सेव की गई वैल्यू को अपडेट करने के लिए setValue फ़ंक्शन का इस्तेमाल करें.

किसी फ़ील्ड की वैल्यू और उसके टेक्स्ट के बारे में ज़्यादा जानने के लिए, किसी फ़ील्ड की बनावट देखें.

अपग्रेड करने से जुड़ी सहायता पाना

क्या जानकारी देनी है

सहायता मांगते समय, खास सवाल पूछना सबसे अच्छा होता है:

इस तरह न लिखें: "इस फ़ील्ड में क्या गड़बड़ी है?"

यह भी सुझाव नहीं दिया जाता: "इस फ़ील्ड को अपग्रेड करने में मेरी मदद करो."

सुझाया गया: "फ़ील्ड का टेक्स्ट ठीक से अपडेट नहीं हो रहा है."

आपकी मदद करने वाले लोगों को संसाधन उपलब्ध कराना भी ज़रूरी है. इन फ़ाइलों को दूसरों के लिए इस्तेमाल करना आसान होना चाहिए.

हम इसका सुझाव नहीं देते:

  • कोड की इमेज.
  • अधूरा कोड.

सुझाया गया:

  • टेक्स्ट फ़ॉर्मैट में पूरा फ़ील्ड कोड.
  • खराब फ़ील्ड बिहेवियर वाले GIF की इमेज.
  • फ़ील्ड के गलत तरीके से काम करने की जानकारी फिर से मुहैया कराने के तरीके.
  • Blockly का वह वर्शन जिसे अपग्रेड किया जा रहा है.

कहां पोस्ट करें

अपग्रेड के बाद के सवालों को Blockly डेवलपर फ़ोरम पर पोस्ट करें.

अगर आपको लगता है कि समस्या Blockly Core में है, तो Blockly GitHub पर समस्या पोस्ट करें. अगर आपको कोई समस्या पोस्ट करनी है, तो कृपया मांगी गई सभी जानकारी भरें.