Yeni alan türü oluşturma

Yeni bir alan türü oluşturmadan önce, diğer alanlardan birinin yöntemler ne kadar iyi bir teknik olduğunu açıklayacağım. Uygulamanızın depoladığı bir veya mevcut bir değer türü için yeni bir kullanıcı arayüzü oluşturmak istiyorsanız büyük olasılıkla yeni bir alan türü oluşturmanız gerekir.

Yeni bir alan oluşturmak için aşağıdakileri yapın:

1. Bir oluşturucu uygulayın.
2. Bir JSON anahtarı kaydedin ve fromJson uygulayın.
3. Bloktaki kullanıcı arayüzü ve etkinliğin ilk kullanıma hazırlanmasını yönetme dinleyiciler.
4. Etkinlik işleyicileri ortadan kaldırma (kullanıcı arayüzünün imha edilmesi siz).
5. Değer işleme uygulayın.
6. Erişilebilirlik için alanınızın değerini belirten bir metin ekleyin.
7. Aşağıdakiler gibi ilave işlevler ekleyin:
   • Düzenleyen.
   • Engellenen ekran güncellemeleri.
   • Serileştirme.
8. Alanınızın ek özelliklerini yapılandırın. Örneğin:
   • Düzenlenebilir ve serileştirilebilir mülkler
   • İmleç

Bu bölümde, söz konusu dildeki içerikleri okuduğunuz ve bildiğiniz varsayılır Anatomi Alan.

Özel alan örneği için bkz. Özel Alanlar demo ,

Oluşturucu uygulama

Alanın başlangıç değerini ayarlamaktan alanın kurucusu sorumludur ve isteğe bağlı olarak yerel bir doğrulayın. Özel alanın oluşturucusu, bağımsız olarak kaynak bloku başlatma sırasında çağrılır kaynak bloğun JSON veya JavaScript'te tanımlanıp tanımlanmadığını kontrol eder. Dolayısıyla, alanının yapım sırasında kaynak bloka erişimi yok.

Aşağıdaki kod örneği, GenericField adlı özel bir alan oluşturur:

class GenericField extends Blockly.Field {
  constructor(value, validator) {
    super(value, validator);

    this.SERIALIZABLE = true;
  }
}

Yöntem imzası

Alan oluşturucuları genellikle bir değer ve yerel doğrulayıcı alır. Değer isteğe bağlıdır ve bir değer iletmezseniz (veya sınıftan geçemeyen bir değer iletirseniz) doğrulamasının ardından, üst sınıfın varsayılan değeri kullanılır. Field sınıfını varsayılan olarak seçerseniz bu değer null olur. Bu varsayılan ayarı istemiyorsanız uygun bir değer ilettiğinizden emin olun. Doğrulayıcı parametresi yalnızca gösterilir ve genellikle isteğe bağlı olarak işaretlenir. Daha fazla bilgi edinin hakkında daha fazla bilgi edinmek için Doğrulayıcılar dokümanlar için tıklayın.

Yapı

Oluşturucunuzun içindeki mantık şu akışı izlemelidir:

1. Devralınan süper oluşturucuyu çağırın (tüm özel alanlar şuradan devralınmalıdır: Blockly.Field veya alt sınıflarından birini) kullanarak değeri doğru şekilde başlatın. ve alanınız için yerel doğrulayıcıyı ayarlayın.
2. Alanınız serileştirilebiliyorsa ilgili özelliği kurucusu. Düzenlenebilir alanlar serileştirilebilmelidir ve alanlar düzenlenebilir olmalıdır olduğundan emin değilseniz bu özelliği büyük olasılıkla "doğru" seri haline getirilemez.
3. İsteğe bağlı: Ek özelleştirme uygulayın (örneğin, Etiket alanları) bir css sınıfının iletilmesine izin verir. Bu sınıf, daha sonra metne uygulanır.

JSON ve kayıt

JSON blokunda tanımlar, alanları bir dizeyle açıklanır (ör. field_number, field_textinput). Blockly, bu dizelerden alan nesnelerine ve çağrılara giden bir eşleme sağlar. fromJson.

Alan türünüzü bu haritaya eklemek için Blockly.fieldRegistry.register numaralı telefonu arayın, alan sınıfını ikinci bağımsız değişken olarak geçirmektir:

Blockly.fieldRegistry.register('field_generic', GenericField);

fromJson işlevinizi de tanımlamanız gerekir. Uygulamanız önce herhangi bir dizenin referansını kaldırın tablo kullanan referanslar replaceMessageReferences, ve ardından değerleri oluşturucuya iletir.

GenericField.fromJson = function(options) {
  const value = Blockly.utils.parsing.replaceMessageReferences(
      options['value']);
  return new CustomFields.GenericField(value);
};

Not: JSON tanımı kullanılırken yerel doğrulayıcılar şu anda desteklenmemektedir. Ancak, özel bir uzantısı.

Başlatılıyor

Alanınız oluşturulduğunda temel olarak yalnızca bir değer içerir. Başlatma işlemi, DOM'nin oluşturulduğu yerdir; model de oluşturulur (alan vardır) ve etkinlikler bağlıdır.

On-Block ekran

Başlatma sırasında ihtiyacınız olacak her şeyi oluşturmak sizin sorumluluğunuzdadır alanın blok ekranında gösterilir.

Varsayılanlar, arka plan ve metin

Varsayılan initView işlevi, açık renkli bir rect öğesi ve bir text öğesi. Alanınızda bunların her ikisine de ek olarak ekstra gibi bir öğe kullanıyorsanız, bu işlevin geri kalanını eklemeden önce üst sınıf initView işlevini DOM öğeleri. Alanınızda bu özelliklerden yalnızca birine sahip olmasını istiyorsanız öğeleri için createBorderRect_ veya createTextElement_ işlevlerini kullanabilirsiniz.

DOM oluşturma işlemini özelleştirme

Alanınız genel bir metin alanıysa (ör. Metin Giriş), DOM oluşturma işlemi sizin için gerçekleştirilecek. Aksi takdirde, sırasında ihtiyacınız olacak DOM öğelerini oluşturmak içininitView oluşturmak sizin işiniz.

Örneğin, bir açılır liste hem resimler hem de metin içerebilir. initView içinde tek bir resim öğesi ve tek bir metin öğesi oluşturur. Ardından render_ sırasında etkin öğeyi gösterir, diğerini ise öğenin türüne göre gizler. tercih edildi.

DOM öğeleri oluşturmak için Blockly.utils.dom.createSvgElement yöntemini veya geleneksel DOM oluşturma işlemini kullanarak yöntemlerine göz atın.

Bir alanın blok üzerinde gösterimi için gerekenler:

• Tüm DOM öğeleri, alanın fieldGroup_ alt öğesi olmalıdır. Alan grubu otomatik olarak oluşturulur.
• Tüm DOM öğeleri, alanın bildirilen boyutlarının içinde kalmalıdır.

Bkz. Oluşturma bölümünü inceleyebilirsiniz.

Metin Simgeleri Ekleme

Bir alanın metnine simge eklemek isterseniz (ör. Açı alanın derece simgesi), simge öğesini (genellikle <tspan>) doğrudan alanın textElement_ öğesine bağlayın.

Giriş etkinlikleri

Varsayılan olarak alanlar, ipucu etkinliklerini ve fareyle üzerine gelme etkinliklerini kaydeder (bu alanlar için kullanılır ve) gösteriliyor düzenleyiciler) girin. Diğer etkinlik türlerini dinlemek istiyorsanız (ör. alanın bindEvents_ işlevini geçersiz kılmanız gerekir.

bindEvents_() {
  // Call the superclass function to preserve the default behavior as well.
  super.bindEvents_();

  // Then register your own additional event listeners.
  this.mouseDownWrapper_ =
  Blockly.browserEvents.conditionalBind(this.getClickTarget_(), 'mousedown', this,
      function(event) {
        this.originalMouseX_ = event.clientX;
        this.isMouseDown_ = true;
        this.originalValue_ = this.getValue();
        event.stopPropagation();
      }
  );
  this.mouseMoveWrapper_ =
    Blockly.browserEvents.conditionalBind(document, 'mousemove', this,
      function(event) {
        if (!this.isMouseDown_) {
          return;
        }
        var delta = event.clientX - this.originalMouseX_;
        this.setValue(this.originalValue_ + delta);
      }
  );
  this.mouseUpWrapper_ =
    Blockly.browserEvents.conditionalBind(document, 'mouseup', this,
      function(_event) {
        this.isMouseDown_ = false;
      }
  );
}

Not: bindEvents_ öğesini geçersiz kılarken her zaman temel işlevi çağırmanız gerekir.

Bir etkinliğe bağlamak için genellikle Blockly.utils.browserEvents.conditionalBind işlevini kullanın. Bu bağlama etkinlikleri, sırasındaki ikincil temasları filtreler kullanır. İşleyicinizin devam eden bir sürüklemenin ortasında bile çalışmasını istiyorsanız URL adresini Blockly.browserEvents.bind işlevini kullanın.

İmha

Alanın bindEvents_ içinde herhangi bir özel etkinlik işleyici kaydettiyseniz işlevinin dispose işlevi içindeki kaydının iptal edilmesi gerekir.

Not: Atmayı geçersiz kılarken her zaman temel işlevi çağırmanız gerekir.

Google Arama'yı doğru şekilde görüntüleyin (tüm DOM öğelerini fieldGroup_ öğesine ekleyerek), ardından alanın DOM'si otomatik olarak imha edilir.

Değer İşleme

→ Bir alanın değeri ile metni arasındaki fark hakkında daha fazla bilgi için alanına giriş yapın.

Doğrulama sırası

Sınıf doğrulayıcı uygulama

Alanlar yalnızca belirli değerleri kabul etmelidir. Örneğin, sayı alanları yalnızca sayı kabul edin, renk alanları yalnızca renk vb. kabul etmelidir. sınıf ve bölge üzerinden doğrulayıcılar ile test edin. Sınıf doğrulayıcı, yerel doğrulayıcılarla aynı kuralları izler ancak bu kuralların da çalıştırılması kurucu ve dolayısıyla, kaynak bloka referans vermemelidir.

Alanınızın sınıf doğrulayıcısını uygulamak için doClassValidation_ yönergesini geçersiz kılın işlevini kullanın.

doClassValidation_(newValue) {
  if (typeof newValue != 'string') {
    return null;
  }
  return newValue;
};

Not: doClassValidation_ öğesine iletilen newValue herhangi bir türde olabilir (diğer geliştiricilerin ne kadar sorumlu olduğuna bağlı olarak) bu nedenle uç durumları ele alın.

Geçerli değerleri işleme

setValue içeren bir alana iletilen değer geçerliyse doValueUpdate_ geri arama. Varsayılan olarak doValueUpdate_ işlevi:

• value_ özelliğini newValue olarak ayarlar.
• isDirty_ özelliğini ayarlar özelliğini true olarak güncelleyin.

Yalnızca değeri depolamanız gerekiyorsa ve özel bir işlem yapmak istemiyorsanız doValueUpdate_ öğesini geçersiz kılmanız gerekmez.

Alternatif olarak, aşağıdaki gibi işlemler de yapabilirsiniz:

• newValue kişilik özel depolama.
• Diğer özellikleri newValue temelinde değiştirin.
• Geçerli değerin geçerli olup olmadığını kaydedin.

doValueUpdate_ ayarını geçersiz kılmanız gerekir:

doValueUpdate_(newValue) {
  super.doValueUpdate_(newValue);
  this.displayValue_ = newValue;
  this.isValueValid_ = true;
}

Dikkat: Aşağıdaki durumlarda, alanınızın blok veya çalışma alanı özelliklerine erişmesi gerekiyorsa değeri ayarladığınızda, bu ayarlar varsa doValueUpdate_ öğesinin sorunsuz bir şekilde başarısız olmasını sağlamalısınız. kullanılamıyor.

Geçersiz değerleri işleme

setValue içeren alana iletilen değer geçersizse doValueInvalid_ geri arama. doValueInvalid_ işlevi varsayılan olarak hiçbir şey. Bu, varsayılan olarak geçersiz değerlerin gösterilmeyeceği anlamına gelir. Aynı zamanda alanın yeniden işlenmeyeceği anlamına gelir. isDirty_ özelliği ayarlanmaz.

Geçersiz değerleri görüntülemek istiyorsanız doValueInvalid_ değerini geçersiz kılmanız gerekir. Çoğu durumda bir displayValue_ özelliğini geçersiz değer, set isDirty_ true değerine gönder ve geçersiz kıl render_ üzerindeki displayValue_ değerine göre güncellenmesi için value_.

doValueInvalid_(newValue) {
  this.displayValue_ = newValue;
  this.isDirty_ = true;
  this.isValueValid_ = false;
}

Uyarı: value_ özelliğini hiçbir zaman geçersiz bir değere ayarlamayın. Alan değerleri her zaman kod oluşturma.

Çok parçalı değerler

Alanınız çok parçalı bir değer (ör. listeler, vektörler, nesneler) içerdiğinde parçalarının bağımsız değerler gibi ele alınmasını isteyebilir.

doClassValidation_(newValue) {
  if (FieldTurtle.PATTERNS.indexOf(newValue.pattern) == -1) {
    newValue.pattern = null;
  }

  if (FieldTurtle.HATS.indexOf(newValue.hat) == -1) {
    newValue.hat = null;
  }

  if (FieldTurtle.NAMES.indexOf(newValue.turtleName) == -1) {
    newValue.turtleName = null;
  }

  if (!newValue.pattern || !newValue.hat || !newValue.turtleName) {
    this.cachedValidatedValue_ = newValue;
    return null;
  }
  return newValue;
}

Yukarıdaki örnekte her newValue özelliği tek tek doğrulanmıştır. Sonra bağımsız bir özellik ise doClassValidation_ işlevinin sonunda geçersizse değer, cacheValidatedValue_ özelliğine önbelleğe alınır. null değeri döndürülüyor (geçersiz). Bağımsız doğrulanmış ile nesneyi önbelleğe alma özellikleri doValueInvalid_ işlevini kullanarak bunları ayrı ayrı ele alabilirsiniz. Her birini yeniden doğrulamak yerine !this.cacheValidatedValue_.property kontrolü ayrı ayrı koyabilirsiniz.

Çok parçalı değerleri doğrulamak için kullanılan bu kalıp yerel doğrulayıcılar ancak şu anda bu kalıbı uygulamanın yolu yoktur.

isDirty_

isDirty_, setValue fonksiyonunu ve alanın diğer bölümlerini de kontrol ederek, ilgili alanın yeniden oluşturuldu. Alanın görünen değeri değiştiyse isDirty_ genellikle true olarak ayarlanmalıdır.

Metin

→ Bir alandaki metnin nerede kullanıldığı ve nasıl farklı olduğu hakkında bilgi için alanın değerine bakın, bkz. alanına giriş yapın.

Alanınızın metni alanınızın değerinden farklıysa geçersiz kılma getTextişlev doğru metni girin.

getText() {
  let text = this.value_.turtleName + ' wearing a ' + this.value_.hat;
  if (this.value_.hat == 'Stovepipe' || this.value_.hat == 'Propeller') {
    text += ' hat';
  }
  return text;
}

Düzenleyen oluşturma

showEditor_ işlevini tanımlarsanız Blockly şunları otomatik olarak dinler: tıklama ve showEditor_ araması için uygun zamanda arama yapabilirsiniz. Herhangi bir HTML'yi görüntüleyebilirsiniz düzenleyicinizde, DropDownDiv adı verilen iki özel div'den birini sarmalayarak ve Blockly'nin kullanıcı arayüzünün üzerinde yüzen WidgetDiv.

Önemli: Bir düzenleyicinin ekranındaki güncellemeler, oluşturma, ve bunlar hemen ele alınmaz. Bu, doğrulayıcıların değerine sahip olduğundan emin olun.

DropDownDiv ve WidgetDiv karşılaştırması

DropDownDiv, bağlı bir kutunun içinde bulunan düzenleyicileri sağlamak için kullanılır. kullanabilirsiniz. Sahaya yakın bir yerde kalırken konumunu otomatik olarak belirler çerçeveleri kullanabilirsiniz. Açı seçici ve renk seçici, DropDownDiv.

WidgetDiv, şunları yapmak için kullanılır: bir kutunun içinde bulunmayan düzenleyiciler sağlamak. Sayı alanlarında alanı bir HTML metin giriş kutusuyla kaplamak için WidgetDiv. DropDownDiv Ancak WidgetDiv bunu yapmaz. Öğelerin manuel olarak konumlandırıldı. Koordinat sistemi tıklayın. Metin girişi düzenleyicisi de WidgetDiv

DropDownDiv örnek kodu

showEditor_() {
  // Create the widget HTML
  this.editor_ = this.dropdownCreate_();
  Blockly.DropDownDiv.getContentDiv().appendChild(this.editor_);

  // Set the dropdown's background colour.
  // This can be used to make it match the colour of the field.
  Blockly.DropDownDiv.setColour('white', 'silver');

  // Show it next to the field. Always pass a dispose function.
  Blockly.DropDownDiv.showPositionedByField(
      this, this.disposeWidget_.bind(this));
}

Not: HTML'nin programatik olarak oluşturulması uzun bir süreç olabilir, bu nedenle buradan girilebilir. Bunun bir örneği için bkz. Özel Alanlar Demo .

WidgetDiv örnek kodu

showEditor_() {
  // Show the div. This automatically closes the dropdown if it is open.
  // Always pass a dispose function.
  Blockly.WidgetDiv.show(
    this, this.sourceBlock_.RTL, this.widgetDispose_.bind(this));

  // Create the widget HTML.
  var widget = this.createWidget_();
  Blockly.WidgetDiv.getDiv().appendChild(widget);
}

Not: Widget HTML'sini programatik olarak oluşturmak son derece uzun bir zaman olabilir. burada sağlanmadı. Bunun bir örneği için Metin Girişi Alan .

Not: Giriş işlevi görmesi amaçlanan ancak özel öğe oluşturmak için data-is-text-input='true' ekleyebilirsiniz Öğeyi giriş olarak ele almak için Blockly'yi seçin.

Temizleme

Widget HTML'sini kaldırması için hem DropDownDiv hem de WidgetDiv tutma yeri ancak mevcut etkinlik işleyicilerinizi manuel olarak uygulanır.

widgetDispose_() {
  for (let i = this.editorListeners_.length, listener;
      listener = this.editorListeners_[i]; i--) {
    Blockly.browserEvents.unbind(listener);
    this.editorListeners_.pop();
  }
}

dispose işlevi, DropDownDiv üzerinde null bağlamında çağrılır. Şu tarihte: WidgetDiv bağlamında çağrıldığı WidgetDiv. Her iki durumda da en iyi seçenek bağlama yukarıdaki DropDownDiv içinde gösterildiği gibi, dispose işlevi iletilirken işlev ve WidgetDiv örnek.

→ Editörlerin imha edilmesine özel olmayan verilerin imha edilmesi hakkında bilgi için bkz. Atma.

Blok üzerindeki ekran güncelleniyor

render_ işlevi, alanın bloktaki ekranını eşleşecek şekilde güncellemek için kullanılır anlamak önemlidir.

Yaygın örnekler şunlardır:

• Metni değiştirme (açılır menü)
• Rengi (renk) değiştir

ziyaret edin.

Önemli: Alan, hiçbir zaman doğrudan render_ çağırmamalıdır. Bunun yerine yeniden oluşturur değeri ayarlanarak tetiklenmelidir isDirty_ true olarak değiştirin.

Varsayılanlar

Varsayılan render_ işlevi, görüntülenen metni getDisplayText_ işlevini kullanın. getDisplayText_ işlevi, alanın value_ özelliğini döndürür maksimum metne uyacak şekilde kısaltıldıktan sonra dizeye dönüştürme seçeceğiz.

Varsayılan engelleme ekranını ve varsayılan metin davranışını kullanıyorsanız çalışır, render_ geçersiz kılmanıza gerek yoktur.

Varsayılan metin davranışı alanınızda işe yarıyor ancak alanınızın bloke durumu display ek statik öğelere sahip. Varsayılan render_ öğesini çağırabilirsiniz. fonksiyonunu kullanabilir, ancak alanın boyut'a dokunun.

Varsayılan metin davranışı alanınızda işe yaramıyorsa veya bloktaki ekran ek dinamik öğelere sahipse özelleştirmeniz gerekir: render_ işlevini kullanın.

Oluşturma özelleştirme

Varsayılan oluşturma davranışı alanınızda çalışmıyorsa şunları yapmanız gerekir: özel oluşturma davranışını tanımlayabilirsiniz. Bu, özel ayarlar yapmaktan, arka plan renklerini güncellemekten farklı resim öğelerini kullanmaya başlayabilirsiniz.

Tüm DOM özelliği değişiklikleri yasaldır. Unutulmaması gereken iki nokta şunlardır:

1. DOM oluşturma işlemi sırasında işlenmelidir: ilk kullanıma hazırlama, çünkü daha verimli.
2. size_ ayarını her zaman güncellemeniz gerekir. özelliğini kullanmanızı öneririz.

render_() {
  switch(this.value_.hat) {
    case 'Stovepipe':
      this.stovepipe_.style.display = '';
      break;
    case 'Crown':
      this.crown_.style.display = '';
      break;
    case 'Mask':
      this.mask_.style.display = '';
      break;
    case 'Propeller':
      this.propeller_.style.display = '';
      break;
    case 'Fedora':
      this.fedora_.style.display = '';
      break;
  }

  switch(this.value_.pattern) {
    case 'Dots':
      this.shellPattern_.setAttribute('fill', 'url(#polkadots)');
      break;
    case 'Stripes':
      this.shellPattern_.setAttribute('fill', 'url(#stripes)');
      break;
    case 'Hexagons':
      this.shellPattern_.setAttribute('fill', 'url(#hexagons)');
      break;
  }

  this.textContent_.nodeValue = this.value_.turtleName;

  this.updateSize_();
}

Önemli: Görünen metni güncellemek için her zaman this.textContent_.nodeValue kullanın bilgi edinin. Bu, text'in desteklenmesine yardımcı olur simgeleri.

Boyut güncelleniyor

Bir alanın size_ özelliğinin güncellenmesi, blok oluşturma kodu alanın nasıl konumlandırılacağına bakalım. Bunu öğrenmenin en iyi yolu size_ tam olarak neyin olması gerektiğini deneyerek olur.

updateSize_() {
  const bbox = this.movableGroup_.getBBox();
  let width = bbox.width;
  let height = bbox.height;
  if (this.borderRect_) {
    width += this.constants_.FIELD_BORDER_RECT_X_PADDING * 2;
    height += this.constants_.FIELD_BORDER_RECT_X_PADDING * 2;
    this.borderRect_.setAttribute('width', width);
    this.borderRect_.setAttribute('height', height);
  }
  // Note how both the width and the height can be dynamic.
  this.size_.width = width;
  this.size_.height = height;
}

Dikkat: Oluşturma sırasında getBBox çağrılması, düzenin bozulmasına neden olabileceğinden boyutu öğrenmek için diğer yöntemleri incelemek isteyebilirsiniz.

Not: Bir alanın genişliği ve yüksekliği dinamik olabilir. Boyut güncellemek de kendine ait bir işlev içinde yer alması gerekmez; tüm bunlara örnek verilebilir. render_. Ancak kodun daha düzenli olması için genellikle birbirinden ayrılır.

Eşleşen blok renkleri

Alanınızdaki öğelerin, bulundukları blokun renkleriyle eşleşmesini istiyorsanız applyColour yöntemini geçersiz kılmanız gerekir. Birlikte çalıştığınız renge erişmek için bloğun stil özelliğini kullanabilirsiniz.

applyColour() {
  const sourceBlock = this.sourceBlock_;
  if (sourceBlock.isShadow()) {
    this.arrow_.style.fill = sourceBlock.style.colourSecondary;
  } else {
    this.arrow_.style.fill = sourceBlock.style.colourPrimary;
  }
}

Not: applyColour yönteminde renkleri önbelleğe almak isteyebilirsiniz. Böylece bunları düzenleyici

Düzenlenebilirlik güncelleniyor

updateEditable işlevi, alanınızın görünümünü değiştirmek için kullanılabilir düzenlenebilir olup olmamasına bağlıdır. Varsayılan işlev, bunu arka plan düzenlenebilir değilse fareyle üzerine gelme yanıtı (kenarlık) içerir/içermez. Blok üzerindeki ekran, düzenlenebilirliğine bağlı olarak boyutu değiştirmemelidir. diğer tüm değişikliklere izin verilir.

updateEditable() {
  if (!this.fieldGroup_) {
    // Not initialized yet.
    return;
  }
  super.updateEditable();

  const group = this.getClickTarget_();
  if (!this.isCurrentlyEditable()) {
    group.style.cursor = 'not-allowed';
  } else {
    group.style.cursor = this.CURSOR;
  }
}

Dikkat: Alandaki imleçle yapılan işlemler kırılgan değildir.

Serileştirme

Serileştirme, alan durumunu kullandığınızdan emin olun.

Çalışma alanınızın durumu, alanın değerini her zaman içerir ancak diğer durumları da (ör. alanınızın kullanıcı arayüzünün durumu) ekleyin. Örneğin, alanı, kullanıcının ülkeleri seçmesine olanak tanıyan yakınlaştırılabilir bir haritaydı. zum düzeyini de serileştirir.

Alanınız serileştirilebiliyorsa SERIALIZABLE özelliğini true.

Blockly, alanlar için iki grup serileştirme kancası sağlar. Bir çift kanca yeni JSON serileştirme sistemiyle çalışırken diğer çift XML serileştirme sistemini kullanmanız gerekir.

saveState ve loadState

saveState ve loadState, yeni JSON ile çalışan serileştirme kancalarıdır. serileştirme sistemidir.

Bazı durumlarda bunları sağlamanız gerekmez. Varsayılan değer işe yarayacaktır. (1) alanınız tabandaki temelin doğrudan alt sınıfıysa Blockly.Field sınıfı, (2) değeriniz JSON seri yapılabilir bir ve (3) yalnızca Google Ads dönüşüm izleme özelliğini değeri seri hâlinde bırakırsanız varsayılan uygulama düzgün çalışacaktır.

Aksi takdirde, saveState fonksiyonunuz seri hale getirilebilir bir JSON değeri döndürecektir nesne/değer. Ayrıca loadState cihazınız işlevi, aynı JSON serileştirilebilir nesnesini/değerini kabul etmeli ve girin.

saveState() {
  return {
    'country': this.getValue(),  // Value state
    'zoom': this.getZoomLevel(), // UI state
  };
}

loadState(state) {
  this.setValue(state['country']);
  this.setZoomLevel(state['zoom']);
}

Tam serileştirme ve veri yedekleme

saveState, isteğe bağlı doFullSerialization parametresini de alır. Bu normalde farklı bir grup tarafından serileştirilmiş duruma referans veren alanlar tarafından kullanılır. serileştirici (ör. yedekleme veri modelleri). Bu parametre, referans verilen durum, blok seri durumdan çıkarıldığında kullanılamaz. Bu nedenle alanı, serileştirmenin tamamını yapmalıdır. Örneğin bu, Tek bir blok serileştirildiğinde veya bir blok kopyalanıp yapıştırıldığında.

Bunun için yaygın olarak kullanılan iki kullanım alanı şunlardır:

• Tek bir blok, yedekleme verilerinin tamamlandığı bir çalışma alanına yüklendiğinde model yoksa alan, modelin mevcut olup olmadığını kontrol etmek için veri modeli oluşturabilirsiniz.
• Bir blok kopyalanıp yapıştırıldığında alan her zaman yeni bir dolgu oluşturur veri modelini kullanır.

Bunu kullanan alanlardan biri yerleşik değişken alanıdır. Normalde seri hâlinde referans aldığı değişkenin kimliğidir, ancak doFullSerialization doğruysa tüm durumunu seri hale getirir.

saveState(doFullSerialization) {
  const state = {'id': this.variable_.getId()};
  if (doFullSerialization) {
    state['name'] = this.variable_.name;
    state['type'] = this.variable_.type;
  }
  return state;
}

loadState(state) {
  const variable = Blockly.Variables.getOrCreateVariablePackage(
      this.getSourceBlock().workspace,
      state['id'],
      state['name'],   // May not exist.
      state['type']);  // May not exist.
  this.setValue(variable.getId());
}

Değişken alanı, değişkenin bir çalışma alanına yüklenmesi durumunda değişkeni mevcut değilse referansta bulunacak yeni bir değişken oluşturabilir.

toXml ve fromXml

toXml ve fromXml, eski XML ile çalışan serileştirme kancalarıdır. serileştirme sistemidir. Bu kancaları yalnızca gerektiğinde kullanın (ör. (henüz taşınmamış eski bir kod tabanında) oturum açın. Aksi takdirde saveState ve loadState.

toXml fonksiyonunuz, girin. Ayrıca fromXml fonksiyonunuz aynı XML düğümünü kabul etmeli ve devreye sokmuştuk.

toXml(fieldElement) {
  fieldElement.textContent = this.getValue();
  fieldElement.setAttribute('zoom', this.getZoomLevel());
  return fieldElement;
}

fromXml(fieldElement) {
  this.setValue(fieldElement.textContent);
  this.setZoomLevel(fieldElement.getAttribute('zoom'));
}

Düzenlenebilir ve seri hale getirilebilir özellikler

EDITABLE özelliği, alanda bunu belirten kullanıcı arayüzü olup olmayacağını belirler çok önemli bir parçasıdır. Varsayılan olarak true değerine ayarlanır.

SERIALIZABLE özelliği, alanın serileştirilmesi gerekip gerekmediğini belirler. Google varsayılan olarak false değerine ayarlanır. Bu tesis true ise şu bilgileri sağlamanız gerekebilir: serileştirme ve seri durumdan çıkarma işlevleri (bkz. Serileştirme).

Önemli: EDITABLE alanınız için true ise SERIALIZABLE da true değerine ayarlandı. Bu durum, geriye dönük uyumluluk için varsayılan olarak geçerli değildir açıklayabiliriz.

İmleci özelleştirme

CURSOR özelliği, kullanıcıların imleçle üzerine geldiklerinde göreceği imleci belirler. girin. Geçerli bir CSS imleç dizesi olmalıdır. İmleç varsayılan olarak bu şekilde ayarlanır yakalama imleci olan .blocklyDraggable tarafından tanımlanır.