JavaScript'te yapıyı engelleme

Bu belgede, bloğunuzdaki girişleri ve alanları (etiketler dahil) tanımlamak için JavaScript'in nasıl kullanılacağı açıklanmaktadır. Bu terimlere aşina değilseniz devam etmeden önce Blokların yapısı başlıklı makaleyi inceleyin.

Girişlerinizi, alanlarınızı ve bağlantılarınızı JSON olarak da tanımlayabilirsiniz.

Girişleri ekleme

JavaScript API, her input type için bir append yöntemi içerir:

JavaScript

init: function() {
  // ...
  this.appendEndRowInput()
      .appendField('for each')
      .appendField('item')
      .appendField(new Blockly.FieldVariable(), 'VAR');
  this.appendValueInput('LIST')
      .setCheck('Array')
      .setAlign(Blockly.inputs.Align.RIGHT)
      .appendField('in list');
  this.appendStatementInput('DO')
      .appendField('do');
  this.appendDummyInput()
      .appendField('end');
}

Dört satırlık bir blok. İlk satırda "her biri için" ve "öğe" etiketleri ile "x" seçilmiş bir değişken açılır listesi bulunur. İkinci satırda "in list" etiketi ve bir değer girişi bulunur. Üçüncü satırda "do" etiketi ve bir ifade girişi var. Son satırda ise "end" etiketi bulunur.

Her appendInput yöntemi, kod oluşturucular tarafından girişe bağlı blok için kodu almak üzere kullanılan bir tanımlayıcı dizesi alabilir. Kod oluşturucular, sahte ve satır sonu girişlerine nadiren referans verir. Bu nedenle, genellikle bunlara tanımlayıcı atamak için bir neden yoktur.

JavaScript API, özel girişler eklemek için genel bir appendInput yöntemi de içerir. Bu durumda tanımlayıcının doğrudan özel girişinizin oluşturucusuna iletilmesi gerektiğini unutmayın.

JavaScript

init: function() {
  // ...
  this.appendInput(new MyCustomInput('INPUT_NAME'))
      .appendField('an example label')
}

appendInput yöntemlerin tümü (hem genel hem de genel olmayan) giriş nesnesini döndürür. Böylece, yöntem zincirleme kullanılarak daha fazla yapılandırılabilirler. Girişleri yapılandırmak için kullanılan üç yerleşik yöntem vardır.

Alanları ekleme

Bir giriş oluşturulup appendInput ile bir bloğa eklendikten sonra, girişe isteğe bağlı olarak herhangi bir sayıda alan eklenebilir. Bu alanlar, her girişin ne için olduğunu açıklayan etiketler olarak kullanılır.

JavaScript

init: function() {
  // ...
  this.appendDummyInput()
      .appendField('hello');
}

Etiketin bulunduğu bir blok

En basit alan etikettir. Blockly'nin kuralı, özel adlar (ör. Google, SQL) hariç tüm metinlerde küçük harf kullanmaktır.

Bir giriş satırı herhangi bir sayıda alan içerebilir. Aynı giriş satırına verimli bir şekilde birkaç alan eklemek için birden fazla appendField çağrısı birlikte kullanılabilir.

JavaScript

init: function() {
  // ...
  this.appendDummyInput()
      .appendField('hello')
      .appendField(new Blockly.FieldLabel('Neil', 'person'));
}

Düz metin olarak "hello" etiketi ve italik olarak "Neil" etiketinin bulunduğu bir blok.

appendField('hello') çağrısı aslında açık bir FieldLabel oluşturucuyu kullanmak için bir kısayoldur: appendField(new Blockly.FieldLabel('hello')). Yapıcıyı kullanmak isteyeceğiniz tek zaman, etiketin bir CSS kuralı kullanılarak biçimlendirilebilmesi için sınıf adı belirtirken olur.

Bağlantı kontrolleri

JavaScript

init: function() {
  // ...
  this.appendValueInput('NUM')
      .setCheck('Number');
}

Bağlantılarda tür kontrolü için setCheck yöntemi kullanılır. Boş bağımsız değişken verilirse (varsayılan), bu giriş herhangi bir bloğa bağlanabilir. Ayrıntılar için Bağlantı kontrolleri başlıklı makaleyi inceleyin.

Alanları hizalama

JavaScript

init: function() {
  // ...
  this.appendValueInput('LIST')
      .appendField('in list')
      .setAlign(Blockly.inputs.Align.RIGHT);
}

setAlign yöntemi, bir giriş içindeki alanları hizalamak için kullanılır. Bu işleve bağımsız değişken olarak iletilebilecek üç açıklayıcı değer vardır: Blockly.inputs.Align.LEFT, Blockly.inputs.Align.RIGHT ve Blockly.inputs.Align.CENTER.

Bir blok sağdan sola modunda (ör. Arapça ve İbranice) oluşturulduğunda sol ve sağ tersine çevrilir. Bu nedenle Blockly.inputs.Align.RIGHT, alanları sola hizalar.