Özel alan oluşturma

Yeni bir alan türü oluşturmadan önce, alanları özelleştirmek için kullanılan diğer yöntemlerden birinin ihtiyaçlarınıza uygun olup olmadığını değerlendirin. Uygulamanızın yeni bir değer türü depolaması gerekiyorsa veya mevcut bir değer türü için yeni bir kullanıcı arayüzü oluşturmak istiyorsanız muhtemelen yeni bir alan türü oluşturmanız gerekir.

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

1. Oluşturucu uygulayın.
2. JSON anahtarı kaydedin ve fromJson uygulayın.
3. Engelleme sırasında kullanıcı arayüzünün ve etkinlik dinleyicilerinin başlatılmasını yönetin.
4. Etkinlik işleyicilerinin kaldırılmasını yönetin (Kullanıcı arayüzü kaldırma işlemi sizin için yapılır).
5. Değer işlemeyi uygulama.
6. Erişilebilirlik için alanınızın değerinin metinle gösterimini ekleyin.
7. Aşağıdakiler gibi ek işlevler ekleyin:
   • Düzenleyici
   • Engelleme sırasında gösterilen güncellemeler.
   • Serileştirme.
8. Alanınızın ek özelliklerini yapılandırın. Örneğin:
   • Düzenlenebilir ve serileştirilebilir özellikler
   • CSS
   • İmleç

Bu bölümde, Alanların Yapısı başlıklı makalenin içeriğini okuduğunuz ve bu içerik hakkında bilgi sahibi olduğunuz varsayılmaktadır.

Özel alan örneği için Özel Alanlar demosuna bakın.

Oluşturucu uygulama

Alan oluşturucu, alanın başlangıç değerini ayarlamaktan ve isteğe bağlı olarak yerel doğrulayıcı ayarlamaktan sorumludur. Özel alanın oluşturucusu, kaynak bloğun JSON veya JavaScript'te tanımlanıp tanımlanmadığına bakılmaksızın kaynak bloğun başlatılması sırasında çağrılır. Bu nedenle, özel alan oluşturma sırasında kaynak bloğa erişemez.

Aşağıdaki kod örneği, GenericField adlı bir özel 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 bir doğrulayıcı alır. Değer isteğe bağlıdır ve bir değer iletmezseniz (veya sınıf doğrulamasında başarısız olan bir değer iletirseniz) üst sınıfın varsayılan değeri kullanılır. Varsayılan Field sınıfı için bu değer null olur. Varsayılan değeri kullanmak istemiyorsanız uygun bir değer ilettiğinizden emin olun. Doğrulayıcı parametresi yalnızca düzenlenebilir alanlar için geçerlidir ve genellikle isteğe bağlı olarak işaretlenir. Doğrulayıcılar dokümanlarında doğrulayıcılar hakkında daha fazla bilgi edinin.

Yapı

Oluşturucunuzdaki mantık şu akışı izlemelidir:

1. Değeri düzgün şekilde başlatmak ve alanınız için yerel doğrulayıcıyı ayarlamak üzere devralınan süper oluşturucuyu (tüm özel alanlar Blockly.Field veya alt sınıflarından birinden devralınmalıdır) çağırın.
2. Alanınız serileştirilebiliyorsa oluşturucuda ilgili özelliği ayarlayın. Düzenlenebilir alanlar serileştirilebilir olmalıdır ve alanlar varsayılan olarak düzenlenebilir. Bu nedenle, serileştirilmemesi gerektiğini bilmediğiniz sürece bu özelliği muhtemelen doğru olarak ayarlamanız gerekir.
3. İsteğe bağlı: Ek özelleştirme uygulayın (örneğin, Etiket alanları, bir CSS sınıfının iletilmesine olanak tanır ve bu sınıf daha sonra metne uygulanır).

JSON ve kayıt

JSON bloğu tanımlarında alanlar bir dizeyle (ör. field_number, field_textinput) açıklanır. Blockly, bu dizelerden alan nesnelerine bir harita oluşturur ve oluşturma sırasında uygun nesnede fromJson işlevini çağırır.

Alan türünüzü bu haritaya eklemek için Blockly.fieldRegistry.register işlevini çağırın ve alan sınıfını ikinci bağımsız değişken olarak iletin:

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

Ayrıca fromJson işlevinizi de tanımlamanız gerekir. Uygulamanız önce replaceMessageReferences kullanarak yerelleştirme jetonlarına yapılan tüm referansların referansını kaldırmalı, ardından değerleri oluşturucuya iletmelidir.

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 uzantı aracılığıyla uygulanabilirler.

Başlatılıyor

Alanınız oluşturulduğunda temelde yalnızca bir değer içerir. Başlatma, DOM'un oluşturulduğu, modelin oluşturulduğu (alan bir modele sahipse) ve etkinliklerin bağlandığı yerdir.

On-Block ekranı

Başlatma sırasında, alanın blok içi gösterimi için ihtiyacınız olacak her şeyi oluşturmak sizin sorumluluğunuzdadır.

Varsayılanlar, arka plan ve metin

Varsayılan initView işlevi, açık renkli bir rect öğesi ve bir text öğesi oluşturur. Alanınızda bunların yanı sıra bazı ek özellikler de olmasını istiyorsanız DOM öğelerinizin geri kalanını eklemeden önce initView üst sınıf işlevini çağırın. Alanınızda bu öğelerden birinin olmasını, ancak ikisinin de olmamasını istiyorsanız createBorderRect_ veya createTextElement_ işlevlerini kullanabilirsiniz.

DOM oluşturmayı özelleştirme

Alanınız genel bir metin alanıysa (ör. Text Input), DOM oluşturma işlemi sizin için gerçekleştirilir. Aksi takdirde, alanınızın gelecekteki oluşturma işlemleri sırasında ihtiyacınız olacak DOM öğelerini oluşturmak için initView işlevini geçersiz kılmanız gerekir.

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

DOM öğeleri oluşturmak için Blockly.utils.dom.createSvgElement yöntemi veya geleneksel DOM oluşturma yöntemleri kullanılabilir.

Bir alanın blok içi gösteriminin şartları şunlardır:

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

Blok içi gösteriminizi özelleştirme ve güncelleme hakkında daha fazla bilgi için Oluşturma bölümüne bakın.

Metin sembolleri ekleme

Bir alanın metnine sembol eklemek istiyorsanız (ör. Açı alanının derece sembolü) sembol öğesini (genellikle <tspan> içinde bulunur) doğrudan alanın textElement_ öğesine ekleyebilirsiniz.

Giriş etkinlikleri

Varsayılan olarak alanlar, ipucu etkinliklerini ve mousedown etkinliklerini (düzenleyicileri göstermek için kullanılır) kaydeder. Başka tür etkinlikleri dinlemek istiyorsanız (ör. bir alanda sürükleme işlemini işlemek istiyorsanız) 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_ işlevini 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 kullanmanız gerekir. Bu etkinlik bağlama yöntemi, sürükleme sırasında ikincil dokunuşları filtreler. İşleyicinizin devam eden bir sürükleme işleminin ortasında bile çalışmasını istiyorsanız Blockly.browserEvents.bind işlevini kullanabilirsiniz.

Bertaraf etme

Alan işlevinin bindEvents_ içinde özel etkinlik dinleyicileri kaydettiyseniz bunların dispose işlevinin içinde kaydı silinmelidir.

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

Alanınızın görünümünü doğru şekilde başlattıysanız (tüm DOM öğelerini fieldGroup_'ye ekleyerek) alanın DOM'u otomatik olarak kaldırılır.

Değer işleme

→ Bir alanın değeri ile metni arasındaki fark hakkında bilgi edinmek için Bir alanın yapısı başlıklı makaleyi inceleyin.

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ıları, renk alanları yalnızca renkleri kabul etmelidir. Bu, sınıf ve yerel doğrulayıcılar aracılığıyla sağlanır. Sınıf doğrulayıcı, yerel doğrulayıcılarla aynı kuralları uygular. Ancak constructor içinde de çalıştırıldığından kaynak bloğa referans vermemelidir.

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

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

Not: doClassValidation_'a iletilen newValue, herhangi bir türde olabilir (diğer geliştiricilerin ne kadar sorumlu davrandığına bağlı olarak). Bu nedenle, uç durumları işlemeye hazır olun.

Geçerli değerleri işleme

setValue içeren bir alana iletilen değer geçerliyse doValueUpdate_ geri araması alırsınız. Varsayılan olarak doValueUpdate_ işlevi:

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

Değeri yalnızca saklamanız gerekiyorsa ve özel işlem yapmak istemiyorsanız doValueUpdate_ değerini geçersiz kılmanız gerekmez.

Aksi takdirde, aşağıdaki gibi işlemleri yapmak istiyorsanız:

• newValue için özel depolama alanı.
• Diğer özellikleri newValue'e göre değiştirin.
• Mevcut değerin geçerli olup olmadığını kaydeder.

doValueUpdate_ değerini geçersiz kılmanız gerekir:

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

Dikkat: Alanınız değeri ayarlarken bloğun veya çalışma alanının özelliklerine erişmesi gerekiyorsa bu özellikler kullanılamıyorsa doValueUpdate_'nin sorunsuz bir şekilde başarısız olmasını sağlamalısınız.

Geçersiz değerleri işleme

setValue ile alana iletilen değer geçersizse doValueInvalid_ geri araması alırsınız. doValueInvalid_ işlevi varsayılan olarak hiçbir işlem yapmaz. Bu, varsayılan olarak geçersiz değerlerin gösterilmeyeceği anlamına gelir. Ayrıca, isDirty_ özelliği ayarlanmayacağından alanın yeniden oluşturulmayacağı anlamına da gelir.

Geçersiz değerleri göstermek istiyorsanız doValueInvalid_ değerini geçersiz kılmanız gerekir. Çoğu durumda, displayValue_ özelliğini geçersiz değere ayarlamanız, isDirty_ özelliğini true olarak ayarlamanız ve override render_ özelliğini kullanmanız gerekir. Bu sayede, blok içi gösterim value_ yerine displayValue_ temel alınarak güncellenir.

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

Uyarı: value_ özelliğini asla geçersiz bir değere ayarlamayın. Alan değerleri her zaman kod oluşturma işleminde kullanılmaya uygun olmalıdır.

Ç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 ayrı değerler olarak işlenmesini isteyebilirsiniz.

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 newValue öğesinin her bir özelliği ayrı ayrı doğrulanır. Ardından, doClassValidation_ işlevinin sonunda, herhangi bir özellik geçersizse null (geçersiz) döndürülmeden önce değer cacheValidatedValue_ özelliğine önbelleğe alınır. Nesnenin ayrı ayrı doğrulanmış özelliklerle önbelleğe alınması, doValueInvalid_ işlevinin her özelliği ayrı ayrı yeniden doğrulamak yerine yalnızca bir !this.cacheValidatedValue_.property kontrolü yaparak bunları ayrı ayrı işlemesine olanak tanır.

Çok parçalı değerleri doğrulama için kullanılan bu kalıp, yerel doğrulayıcılarda da kullanılabilir ancak şu anda bu kalıbı zorunlu kılmanın bir yolu yoktur.

isDirty_

isDirty_, alanın yeniden oluşturulması gerekip gerekmediğini belirtmek için setValue işlevinde ve alanın diğer bölümlerinde kullanılan bir işarettir. Alan değerinin gösterimi değiştiyse isDirty_ genellikle true olarak ayarlanmalıdır.

Metin

→ Bir alanın metninin nerede kullanıldığı ve alanın değerinden nasıl farklı olduğu hakkında bilgi edinmek için Bir alanın yapısı başlıklı makaleyi inceleyin.

Alanınızın metni, alanınızın değerinden farklıysa doğru metni sağlamak için getText işlevini geçersiz kılmanız gerekir.

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üzenleyici oluşturma

showEditor_ işlevini tanımlarsanız Blockly, tıklamaları otomatik olarak dinler ve uygun zamanda showEditor_ işlevini çağırır. Blockly'nin kullanıcı arayüzünün geri kalanının üzerinde kayan DropDownDiv ve WidgetDiv adlı iki özel div'dan birine sararak düzenleyicinizde herhangi bir HTML'yi görüntüleyebilirsiniz.

Önemli: Bir düzenleyicinin ekranındaki güncellemeler hemen işlenmek yerine oluşturma sırasında işlenmelidir. Bu sayede doğrulayıcılar, değeri uygulanmadan önce yakalayabilir.

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

DropDownDiv, bir alana bağlı bir kutunun içinde bulunan düzenleyicileri sağlamak için kullanılır. Görünür sınırlar içinde kalırken otomatik olarak sahaya yakın bir konuma yerleşir. Açı seçici ve renk seçici, DropDownDiv için iyi birer örnektir.

WidgetDiv, kutu içinde bulunmayan düzenleyiciler sağlamak için kullanılır. Sayı alanları, alanı bir HTML metin girişi kutusuyla kaplamak için WidgetDiv öğesini kullanır. DropDownDiv, konumlandırmayı sizin için yönetirken WidgetDiv bunu yapmaz. Öğelerin manuel olarak konumlandırılması gerekir. Koordinat sistemi, pencerenin sol üst kısmına göre piksel koordinatlarıdır. Metin girişi düzenleyicisi, WidgetDiv için iyi bir örnektir.

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'yi programatik olarak oluşturmak oldukça uzun sürebileceğinden bu yöntem burada açıklanmamıştır. Bununla ilgili bir örnek için Özel Alanlar Demosu'na bakın.

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 oldukça uzun sürebileceğinden burada sağlanmamıştır. Bununla ilgili bir örnek için Text Input Field'ın uygulanmasına bakın.

Not: Giriş gibi davranması amaçlanan ancak özel bir öğe kullanan bir widget oluşturuyorsanız Blockly'ye öğeyi giriş olarak değerlendirmesini bildirmek için öğenize data-is-text-input='true' ekleyebilirsiniz.

Temizleme

Hem DropDownDiv hem de WidgetDiv, widget'ın HTML öğelerinin yok edilmesini yönetir ancak bu öğelere uyguladığınız etkinlik işleyicileri manuel olarak kaldırmanız gerekir.

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ıyor. WidgetDiv, WidgetDiv bağlamında adlandırılır. Her iki durumda da, yukarıdaki DropDownDiv ve WidgetDiv örneklerinde gösterildiği gibi, bir dispose işlevi geçirirken bind işlevini kullanmak en iyisidir.

→ Düzenleyicilerin elden çıkarılmasıyla ilgili olmayan bilgiler için Elden çıkarma başlıklı makaleyi inceleyin.

Blok içi ekranı güncelleme

render_ işlevi, alanın blok içi gösterimini dahili değeriyle eşleşecek şekilde güncellemek için kullanılır.

Yaygın örnekler:

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

Önemli: Alan, render_ işlevini asla doğrudan çağırmamalıdır. Bunun yerine, yeniden oluşturmalar isDirty_ özelliğinin true olarak ayarlanmasıyla tetiklenmelidir.

Varsayılanlar

Varsayılan render_ işlevi, görüntülenen metni getDisplayText_ işlevinin sonucu olarak ayarlar. getDisplayText_ işlevi, maksimum metin uzunluğuna uyacak şekilde kısaltıldıktan sonra alanın value_ özelliğini dizeye dönüştürülmüş olarak döndürür.

Varsayılan engelleme içi gösterimi kullanıyorsanız ve varsayılan metin davranışı alanınız için çalışıyorsa render_ değerini geçersiz kılmanız gerekmez.

Varsayılan metin davranışı alanınız için çalışıyorsa ancak alanınızın blok içi gösteriminde ek statik öğeler varsa varsayılan render_ işlevini çağırabilirsiniz. Ancak alanın boyutunu güncellemek için yine de bu işlevi geçersiz kılmanız gerekir.

Varsayılan metin davranışı alanınız için çalışmıyorsa veya alanınızın blok içi gösteriminde ek dinamik öğeler varsa render_ işlevini özelleştirmeniz gerekir.

Oluşturmayı özelleştirme

Varsayılan oluşturma davranışı alanınız için çalışmıyorsa özel oluşturma davranışı tanımlamanız gerekir. Özel görüntüleme metni ayarlama, resim öğelerini değiştirme ve arka plan renklerini güncelleme gibi işlemler bu kapsamdadır.

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

1. DOM oluşturma işlemi, daha verimli olduğu için başlatma sırasında yapılmalıdır.
2. Her zaman size_ özelliğini, blok içi reklamın boyutuna uyacak şekilde güncellemelisiniz.

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: Alanınızın görüntüleme metnini güncellemek için her zaman this.textContent_.nodeValue simgesini kullanın. Bu, metin sembollerinin desteklenmesine yardımcı olur.

Güncelleme boyutu

Bir alanın size_ özelliğini güncellemek çok önemlidir. Bu özellik, alanın nasıl konumlandırılacağı konusunda blok oluşturma kodunu bilgilendirir. size_ simgesinin tam olarak ne olması gerektiğini öğrenmenin en iyi yolu deneme yapmaktır.

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 işlevini çağırmak düzen karmaşasına neden olabilir. Bu nedenle, boyutu almanın başka yollarını araştırmanız önerilir.

Not: Bir alanın genişliği ve yüksekliği dinamik olabilir ve boyutun güncellenmesi kendi işlevinde yer almak zorunda değildir. Bu işlem render_ içinde yapılabilir. Ancak kodu daha düzenli tutmak için genellikle ayrılır.

Eşleşen blok renkleri

Alanınızdaki öğelerin, bağlı oldukları bloğun renkleriyle eşleşmesini istiyorsanız applyColour yöntemini geçersiz kılmanız gerekir. Renge, bloğun stil özelliği üzerinden erişmeniz gerekir.

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

Not: Etkinleştirildiğinde applyColour yöntemindeki renkleri düzenleyicinize uygulayabilmek için önbelleğe almak isteyebilirsiniz.

Düzenlenebilirliği güncelleme

updateEditable işlevi, alanınızın düzenlenebilir olup olmamasına bağlı olarak nasıl görüneceğini değiştirmek için kullanılabilir. Varsayılan işlev, düzenlenebilirse/düzenlenemezse arka planın fareyle üzerine gelindiğinde yanıt (kenarlık) vermesini/vermemesini sağlar. Blok içi gösterim, düzenlenebilirliğine bağlı olarak boyut değiştirmemelidir ancak 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: Bir alanın imleciyle oynamak risklidir.

Serileştirme

Serileştirme, alanınızın durumunu kaydederek daha sonra Workspace'e yeniden yüklenmesini sağlar.

Çalışma alanınızın durumu her zaman alanın değerini içerir ancak alanınızın kullanıcı arayüzünün durumu gibi başka durumlar da içerebilir. Örneğin, alanınız kullanıcının ülke seçmesine olanak tanıyan, yakınlaştırılabilir bir haritaysa yakınlaştırma düzeyini de serileştirebilirsiniz.

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

Blockly, alanlar için iki grup serileştirme kancası sağlar. Bir kanca çifti yeni JSON serileştirme sistemiyle, diğer kanca çifti ise eski XML serileştirme sistemiyle çalışır.

saveState ve loadState

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

Bazı durumlarda varsayılan uygulamalar çalışacağından bunları sağlamanız gerekmez. (1) Alanınız temel Blockly.Field sınıfının doğrudan bir alt sınıfıysa, (2) değeriniz JSON serileştirilebilir bir türse ve (3) yalnızca değeri serileştirmeniz gerekiyorsa varsayılan uygulama sorunsuz bir şekilde çalışır.

Aksi takdirde, saveState işleviniz alanın durumunu temsil eden JSON'a dönüştürülebilir bir nesne/değer döndürmelidir. loadState işleviniz aynı JSON serileştirilebilir nesneyi/değeri kabul etmeli ve bunu alana uygulamalıdır.

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 destekleme verileri

saveState isteğe bağlı bir parametre olan doFullSerialization değerini de alır. Bu, normalde farklı bir serileştirici (ör. destekleyen veri modelleri) tarafından serileştirilmiş duruma referans veren alanlar tarafından kullanılır. Parametre, başvurulan durumun blok seri durumdan çıkarıldığında kullanılamayacağını belirtir. Bu nedenle, alan tüm serileştirme işlemlerini kendisi yapmalıdır. Örneğin, tek bir blok seri hale getirildiğinde veya bir blok kopyalanıp yapıştırıldığında bu durum geçerlidir.

Bu özelliğin iki yaygın kullanım alanı şunlardır:

• Bir blok, destekleyici veri modelinin bulunmadığı bir çalışma alanına yüklendiğinde alan, yeni bir veri modeli oluşturmak için kendi durumunda yeterli bilgiye sahiptir.
• Bir blok kopyalanıp yapıştırıldığında alan, mevcut bir veri modeline referans vermek yerine her zaman yeni bir destekleyici veri modeli oluşturur.

Bunu kullanan alanlardan biri yerleşik değişken alanıdır. Normalde, başvurduğu değişkenin kimliğini serileştirir ancak doFullSerialization doğruysa tüm durumunu serileştirir.

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ı, bir çalışma alanına yüklendiğinde değişkeninin mevcut olmaması durumunda referans verilecek yeni bir değişken oluşturabilmesi için bu işlemi yapar.

toXml ve fromXml

toXml ve fromXml, eski XML serileştirme sistemiyle çalışan serileştirme kancalarıdır. Bu kancaları yalnızca kullanmanız gerekiyorsa (ör.henüz taşınmamış eski bir kod tabanı üzerinde çalışıyorsanız) kullanın. Aksi takdirde saveState ve loadState kullanın.

toXml işleviniz, alanın durumunu temsil eden bir XML düğümü döndürmelidir. fromXml işleviniz de aynı XML düğümünü kabul etmeli ve bunu alana uygulamalıdır.

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 serileştirilebilir özellikler

EDITABLE özelliği, alanla etkileşim kurulabileceğini belirten bir kullanıcı arayüzünün olup olmayacağını belirler. Varsayılan olarak true değerine ayarlanır.

SERIALIZABLE özelliği, alanın serileştirilip serileştirilmeyeceğini belirler. Varsayılan olarak false değerine ayarlanır. Bu özellik true ise serileştirme ve seri durumdan çıkarma işlevleri sağlamanız gerekebilir (bkz. Serileştirme).

Önemli: EDITABLE, alanınız için true ise SERIALIZABLE de true olarak ayarlanmalıdır. Geriye dönük uyumluluk nedeniyle bu durum varsayılan olarak geçerli değildir.

CSS ile özelleştirme

Alanınızı CSS ile özelleştirebilirsiniz. initView yönteminde, alanınızın fieldGroup_ öğesine özel bir sınıf ekleyin, ardından CSS'nizde bu sınıfa referansta bulunun.

Örneğin, farklı bir imleç kullanmak için:

initView() {
  ...

  // Add a custom CSS class.
  if (this.fieldGroup_) {
    Blockly.utils.dom.addClass(this.fieldGroup_, 'myCustomField');
  }
}

.myCustomField {
  cursor: cell;
}

İmleci özelleştirme

Varsayılan olarak, FieldInput sınıfını genişleten sınıflarda kullanıcı alanın üzerine geldiğinde text imleci, sürüklenen alanlarda grabbing imleci, diğer tüm alanlarda ise default imleci kullanılır. Farklı bir imleç kullanmak istiyorsanız CSS kullanarak ayarlayın.

Not: 12.0.0 sürümünden önce imleci CURSOR özelliği belirliyordu. Değeri geçerli bir CSS imleç dizesiydi.