Tanımlayıcılar

Blok tanımları, bir bloğun nasıl göründüğünü ve davrandığını, metin, renk, şekil ve bağlanabileceği diğer bloklar gibi unsurları açıklar.

JSON biçimi ve JavaScript API karşılaştırması

Blockly'de blokları tanımlamak için iki yöntem vardır: JSON nesneleri ve JavaScript işlevleri. JSON biçimi, farklı kelime sıralamasına sahip diller için geliştirme yaparken yerelleştirme sürecini basitleştirmek üzere tasarlanmıştır. Blokları tanımlamak için tercih edilen yöntem JSON biçimidir.

Ancak JSON biçimi, mutatörler veya doğrulayıcılar gibi gelişmiş özellikleri doğrudan tanımlayamaz. Bunlar JavaScript'te, genellikle uzantılar olarak yazılmalıdır.

Blockly'nin orijinal JavaScript uygulamasını kullanan uygulamalar, aşağıdaki çeşitli JavaScript örneklerinde gösterilen blok tanımlarını doğrudan daha alt seviyedeki Blockly API işlev çağrılarına da yazabilir.

JSON

Blockly.defineBlocksWithJsonArray([{
  "type": "string_length",
  "message0": 'length of %1',
  "args0": [
    {
      "type": "input_value",
      "name": "VALUE",
      "check": "String"
    }
  ],
  "output": "Number",
  "colour": 160,
  "tooltip": "Returns number of letters in the provided text.",
  "helpUrl": "http://www.w3schools.com/jsref/jsref_length_string.asp"
}]);

JavaScript

Blockly.Blocks['string_length'] = {
  init: function() {
    this.appendValueInput('VALUE')
        .setCheck('String')
        .appendField('length of');
    this.setOutput(true, 'Number');
    this.setColour(160);
    this.setTooltip('Returns number of letters in the provided text.');
    this.setHelpUrl('http://www.w3schools.com/jsref/jsref_length_string.asp');
  }
};

init işlevi, bloğun şeklini oluşturur. Bu işlev bağlamında this anahtar kelimesi, oluşturulan gerçek bloktur.

Her iki örnek de aynı "string_length" bloğunu yükler.

Web'de JSON biçimi, initJson işlevi kullanılarak yüklenir. Bu, Blockly web sayfalarında iki biçimin karıştırılmasına da olanak tanır. Mümkün olduğunda bloğunuzu JSON ile tanımlamanız ve JavaScript'i yalnızca JSON'un desteklemediği blok tanımları bölümleri için kullanmanız tercih edilir.

Aşağıda, ağırlıklı olarak JSON kullanılarak tanımlanan ancak dinamik bir ipucu eklemek için JavaScript API kullanılarak genişletilen bir blok örneği verilmiştir.

JavaScript

var mathChangeJson = {
  "message0": "change %1 by %2",
  "args0": [
    {"type": "field_variable", "name": "VAR", "variable": "item", "variableTypes": [""]},
    {"type": "input_value", "name": "DELTA", "check": "Number"}
  ],
  "previousStatement": null,
  "nextStatement": null,
  "colour": 230
};

Blockly.Blocks['math_change'] = {
  init: function() {
    this.jsonInit(mathChangeJson);
    // Assign 'this' to a variable for use in the tooltip closure below.
    var thisBlock = this;
    this.setTooltip(function() {
      return 'Add a number to variable "%1".'.replace('%1',
          thisBlock.getFieldValue('VAR'));
    });
  }
};

Blok rengi

Bir bloğun birincil rengi JSON colour özelliği, block.setColour(..) işleviyle veya temalar kullanılarak ve blok stili tanımlanarak tanımlanır.

JSON

{
  // ...,
  "colour": 160,
}

JavaScript

init: function() {
  // ...
  this.setColour(160);
}

Daha fazla ayrıntı için blok renk kılavuzuna bakın.

Ekstre Bağlantıları

Kullanıcılar nextStatement ve previousStatement bağlayıcılarını kullanarak blok dizileri oluşturabilir. Blockly'nin standart düzeninde bu bağlantılar, bloklar dikey olarak üst üste yerleştirilerek üstte ve altta yer alır.

Önceki bağlayıcıya sahip bir blokta çıkış bağlayıcısı olamaz (veya tam tersi). İfade bloğu terimi, değeri olmayan bir blok anlamına gelir. İfade bloku genellikle hem önceki hem de sonraki bağlantıyı içerir.

nextStatement ve previousStatement bağlantıları yazılabilir ancak bu özellik standart bloklar tarafından kullanılmaz.

Sonraki Bağlantı

Bloğun altında bir nokta oluşturur. Böylece bu noktanın altına diğer ifadeler de toplanabilir. Sonraki bağlantısı olan ancak önceki bağlantısı olmayan bloklar genellikle bir etkinliği temsil eder ve şapka ile oluşturulacak şekilde yapılandırılabilir.

JSON

Yazılmamış:

{
  ...,
  "nextStatement": null,
}

Yazılan (nadir):

{
  "nextStatement": "Action",
  ...
}

JavaScript

Yazılmamış:

this.setNextStatement(true);  // false implies no next connector, the default

Yazılan (nadir):

this.setNextStatement(true, 'Action');

Önceki bağlantı

Bloğun üst kısmında bir ifade yığını olarak bağlanabilmesi için bir çentik oluşturur.

Önceki bağlantısı olan blokların çıkış bağlantısı olamaz.

JSON

Yazılmamış:

{
  ...,
  "previousStatement": null,
}

Yazılan (nadir):

{
  "previousStatement": "Action",
  ...
}

JavaScript

Yazılmamış:

this.setPreviousStatement(true);  // false implies no previous connector, the default

Yazılan (nadir):

this.setPreviousStatement(true, 'Action');

Çıkışı Engelle

Bir blokun, önde gelen kenarda erkek yapboz bağlayıcısı olarak temsil edilen tek bir çıkışı olabilir. Çıkışlar değer girişlerine bağlanır. Çıkışı olan bloklar genellikle değer blokları olarak adlandırılır.

JSON

Yazılmamış:

{
  // ...,
  "output": null,
}

Yazdığı tarih:

{
  // ...,
  "output": "Number",
}

JavaScript

Yazılmamış:

init: function() {
  // ...
  this.setOutput(true);
}

Yazdığı tarih:

init: function() {
  // ...
  this.setOutput(true, 'Number');
}

Çıkış bağlayıcısı olan bloklarda aynı zamanda önceki ifade çentiği bulunamaz.

Girişleri Engelle

Her blokta bir veya daha fazla giriş vardır. Bu girişlerin her biri, alan dizisine sahiptir ve bağlantıyla sona erebilir. Birkaç tür yerleşik giriş vardır.

  • Değer girişi: Değer bloğunun çıkış bağlantısına bağlanır. math_arithmetic bloku (toplama, çıkarma), iki değer girişi olan bir blok örneğidir.
  • İfade girişi: Bir ifade bloğunun önceki bağlantısına bağlanır. Süre döngüsünün iç içe yerleştirilmiş bölümü, ifade girişi örneğidir.
  • Geçersiz giriş: Blok bağlantısı yoktur. Blok, harici değer girişleri kullanacak şekilde yapılandırıldığında yeni satır gibi davranır.
  • Son satır girişi: Blok bağlantısı yoktur ve her zaman yeni satır gibi çalışır.

Özel oluşturmayı desteklemek için özel bir giriş de oluşturabilirsiniz.

JSON biçimi ve JavaScript API, girişlerini açıklamak için biraz farklı modeller kullanır.

JSON'deki Girişler ve Alanlar

JSON tanımlı bloklar, eşleşen JSON argsN dizisindeki her interpolasyon jetonu ( %1, %2, ...) bir alan veya giriş ucudur (böylece giriş bağlayıcısının mesajın içinde oluşturduğu) interpolasyon yapılan mesaj dizelerinden oluşan bir dizi (message0, message1, ...) olarak yapılandırılır. Bu biçimin amacı, uluslararasılaştırmayı kolaylaştırmaktır.

JSON

{
  "message0": "set %1 to %2",
  "args0": [
    {
      "type": "field_variable",
      "name": "VAR",
      "variable": "item",
      "variableTypes": [""]
    },
    {
      "type": "input_value",
      "name": "VALUE"
    }
  ]
}

İnterpolasyon jetonları, args0 dizisiyle tamamen eşleşmelidir: yineleme ve eksiklik yok. Jetonlar herhangi bir sırada olabilir, bu da farklı dillerin bloğun düzenini değiştirmesine olanak tanır.

İnterpolasyon jetonunun her iki tarafındaki metinlerde boşluk kaldırıldı. % karakterini kullanan metin (ör. yüzdeden bahsederken), interpolasyon jetonu olarak yorumlanmaması için %% kullanılmalıdır.

Bağımsız değişkenlerin sırası ve bağımsız değişken türleri, blokun şeklini tanımlar. Bu dizelerden birini değiştirmek blok düzenini tamamen değiştirebilir. Bu, özellikle kelime sırası İngilizce'den farklı olan dillerde önemlidir. "set %1 to %2" ifadesinin (yukarıdaki örnekte kullanıldığı gibi) "put %2 in %1" ifadesini ters çevirmesi gereken varsayıma dayalı bir dil düşünün. Bu dizenin değiştirilmesi (ve JSON'un geri kalanının değişmeden bırakılması) aşağıdaki blokla sonuçlanır:

Blockly; alanların sırasını otomatik olarak değiştirdi, model bir giriş oluşturdu ve harici girişlerden dahili girişlere geçti.

Ayrıca Blockly, mesaj dizesindeki tüm yeni satır karakterini (\n) otomatik olarak bir son satır girişiyle değiştirir.

JSON

{
  "message0": "set %1\nto %2",
  "args0": [
    {
      "type": "field_variable",
      "name": "VAR",
      "variable": "item",
      "variableTypes": [""]
    },
    {
      "type": "input_value",
      "name": "VALUE"
    }
  ]
}

Arg'lar

Her mesaj dizesi, aynı sayıdaki bir args dizisiyle eşlenir. Örneğin, message0, args0 ile gider. İnterpolasyon jetonları (%1, %2, ...) args dizisindeki öğeleri belirtir. Her nesnenin bir type dizesi vardır. Parametrelerin geri kalanı türe bağlı olarak değişiklik gösterir:

Ayrıca kendi özel alanlarınızı ve özel girişlerinizi tanımlayıp bunları bağımsız değişken olarak aktarabilirsiniz.

Her nesnenin bir alt alanı da olabilir. Blockly, nesnenin type öğesini tanımazsa onun yerine alt nesnesi kullanılır. Örneğin, Blockly'ye field_time adlı yeni bir alan eklenirse bu alanı kullanan engellemeler, eski Blockly sürümleri için bir field_input yedeği tanımlamak amacıyla alt kullanabilir:

JSON

{
  "message0": "sound alarm at %1",
  "args0": [
    {
      "type": "field_time",
      "name": "TEMPO",
      "hour": 9,
      "minutes": 0,
      "alt":
        {
          "type": "field_input",
          "name": "TEMPOTEXT",
          "text": "9:00"
        }
    }
  ]
}

Bir alt nesnesi kendi alt nesnesine sahip olabilir ve bu nedenle zincirleme olarak kullanılabilir. Sonuç olarak, Blockly args0 dizisinde bir nesne oluşturamazsa (herhangi bir alt nesnesini denedikten sonra) bu nesne atlanır.

message dizesi metinle veya bir girişte yer almayan alanlarla bitiyorsa bloğun sonuna otomatik olarak temsilî bir giriş eklenir. Bu nedenle, bir bloktaki son giriş model girişse args dizisinden çıkarılabilir ve message içine interpolasyon yapılması gerekmez. Kuyruk kısmıyla ilgili bir model girişinin otomatik olarak eklenmesi, çevirmenlerin JSON dosyasının geri kalanını değiştirmeye gerek kalmadan message üzerinde değişiklik yapmasını sağlar. Bu sayfanın önceki kısımlarında yer alan "set %1 to %2" (sahte giriş yok) ve "put %2 in %1" (model giriş eklenmiş) örneğine göz atın.

implicitAlign0

Nadir durumlarda, otomatik olarak oluşturulan sondaki temsili girişin "RIGHT" veya "CENTRE" ile hizalanması gerekir. Belirtilmezse varsayılan olarak "LEFT" kullanılır.

Aşağıdaki örnekte message0, "send email to %1 subject %2 secure %3" parametresidir ve Blockly, üçüncü satır için otomatik olarak bir temsilî giriş ekler. implicitAlign0 öğesinin "RIGHT" olarak ayarlanması, bu satırı sağa hizalamaya zorlar. Bu hizalama, mesajdaki yeni satır karakterlerinin ('\n') yerini alan son satır girişleri dahil olmak üzere JSON blok tanımında açıkça tanımlanmamış tüm girişler için geçerlidir. Ayrıca, implicitAlign0 ile aynı davranışa sahip olan ve kullanımdan kaldırılan lastDummyAlign0 özelliği de vardır.

RTL (Arapça ve İbranice) için bloklar tasarlarken sağ ve sol tersine çevrilir. Bu nedenle "RIGHT", alanları sola hizalar.

message1, args1 implicitAlign1

Bazı bloklar doğal olarak iki veya daha fazla ayrı parçaya bölünür. İki satırdan oluşan bu tekrarlanan bloku düşünün:

Bu engelleme tek bir mesajla açıklanmışsa message0 özelliği "repeat %1 times %2 do %3" olur. Bu dize bir çevirmen için tuhaf ve %2 yerine koymanın ne anlama geldiğini açıklamak zordur. Bazı dillerde %2 temsili girişi de istenmeyebilir. İkinci sıradaki metni paylaşmak isteyen birden çok blok olabilir. JSON'un birden fazla mesaj ve bağımsız değişken özelliği kullanması daha iyi bir yaklaşımdır:

JSON

{
  "type": "controls_repeat_ext",
  "message0": "repeat %1 times",
  "args0": [
    {"type": "input_value", "name": "TIMES", "check": "Number"}
  ],
  "message1": "do %1",
  "args1": [
    {"type": "input_statement", "name": "DO"}
  ],
  "previousStatement": null,
  "nextStatement": null,
  "colour": 120
}

0 ile başlayıp sırayla artan herhangi bir sayıda message, args ve implicitAlign özelliği JSON biçiminde tanımlanabilir. Blok Fabrikası'nın mesajları birden fazla parçaya bölemediğini, ancak bunu manuel olarak yapmanın oldukça basit olduğunu unutmayın.

JavaScript'teki Girişler ve Alanlar

JavaScript API'de her giriş türü için bir append yöntemi bulunur:

JavaScript

this.appendEndRowInput()
    .appendField('for each')
    .appendField('item')
    .appendField(new Blockly.FieldVariable());
this.appendValueInput('LIST')
    .setCheck('Array')
    .setAlign(Blockly.inputs.Align.RIGHT)
    .appendField('in list');
this.appendStatementInput('DO')
    .appendField('do');
this.appendDummyInput()
    .appendField('end');

Her ekleme yöntemi, kod oluşturucular tarafından kullanılan bir tanımlayıcı dizesi alabilir. Sahte ve son satır girişlerine nadiren referans verilmesi gerekir ve tanımlayıcı genellikle ayarlanmadan bırakılır.

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

this.appendInput(new MyCustomInput('INPUT_NAME'))
    .appendField('an example label')

Tüm appendInput yöntemleri (hem genel hem de genel olmayan), yöntem zinciri kullanılarak daha ayrıntılı yapılandırılabilmesi için giriş nesnesini döndürür. Girişleri yapılandırmak için kullanılan üç yerleşik yöntem vardır.

setCheck

JavaScript

input.setCheck('Number');

Bu isteğe bağlı işlev, bağlı girişlerin tür kontrolü için kullanılır. null bağımsız değişkeni verilirse varsayılan olarak bu giriş herhangi bir bloka bağlanabilir. Ayrıntılar için Tür Kontrolleri bölümüne bakın.

setAlign

JavaScript

input.setAlign(Blockly.inputs.Align.RIGHT);

Bu isteğe bağlı işlev, alanları hizalamak için kullanılır (aşağıya bakın). Bu işleve bağımsız değişken olarak aktarılabilecek, kendini tanımlayan üç değer vardır: Blockly.inputs.Align.LEFT, Blockly.inputs.Align.RIGHT ve Blockly.inputs.Align.CENTER.

RTL (Arapça ve İbranice) için bloklar tasarlarken sağ ve sol tersine çevrilir. Bu nedenle Blockly.inputs.Align.RIGHT, alanları sola hizalar.

appendField

Bir giriş oluşturulduktan ve appendInput ile bir bloka eklendikten sonra, isteğe bağlı olarak girişe herhangi bir sayıda alan eklenebilir. Bu alanlar genellikle her bir girişin ne işe yaradığını açıklamak için etiket olarak kullanılır.

JavaScript

input.appendField('hello');

En basit alan öğesi metindir. Blockly'nin kuralı, özel isimler (ör. Google, SQL) haricinde tüm küçük harfli metinleri kullanmaktır.

Giriş satırı, herhangi bir sayıda alan öğesi içerebilir. Birden fazla appendField çağrısı, aynı giriş satırına verimli bir şekilde birkaç alan eklemek için birbirine bağlanabilir.

JavaScript

input.appendField('hello')
     .appendField(new Blockly.FieldLabel('Neil', 'person'));

appendField('hello') çağrısı aslında açık bir FieldLabel oluşturucuyu kullanmanın kısayoludur: appendField(new Blockly.FieldLabel('hello')). Oluşturucu, yalnızca bir sınıf adı belirtildiğinde kullanılabilir. Böylece, metin bir CSS kuralı kullanılarak biçimlendirilebilir.

Satır İçi ve Harici

Blok girişleri, harici veya dahili olarak oluşturulabilir.

Blok tanımı, girişlerin satır içi olup olmadığını kontrol eden isteğe bağlı bir boole değeri belirtebilir. false ise tüm değer girişleri harici (sol blok gibi) olur. true ise tüm değer girişleri satır içi olur (yukarıdaki sağ blok gibi).

JSON

{
  // ...,
  "inputsInline": true
}

JavaScript

init: function() {
  // ...
  this.setInputsInline(true);
}

Tanımlanmamışsa Blockly, hangi modun en iyi olduğunu tahmin etmek için bazı buluşsal yöntemler kullanır. Blockly'nin doğru seçimi yaptığı varsayıldığında, farklı dillerdeki çeviriler otomatik olarak farklı modlara sahip olabileceği için bu alanı tanımsız bırakmak tercih edilir. Bu sayfanın önceki kısımlarında yer alan "set %1 to %2" (harici girişler) ve "put %2 in %1" (satır içi girişler) ile ilgili JSON örneğine göz atın.

Bir blokta sayı gibi küçük girişler olması muhtemelse satır içi girişleri kullanın. collapse yapılandırması etkinse kullanıcı, bu seçeneği içerik menüsünden değiştirebilir (araç kutusunda kategoriler varsa varsayılan olarak "true" kullanılır).

Alanlar

Alanlar, bir bloktaki kullanıcı arayüzü öğelerinin çoğunu tanımlar. Bunlar, dize etiketlerini, görüntüleri ve dizeler ve sayılar gibi düzgün veriler için girişleri içerir. En basit örnek, kullanıcının sayı yazmasını sağlamak için field_input kullanan math_number bloğudur.

Alanlar, appendField kullanılarak bloka eklenir.

Blockly, metin girişleri, renk seçiciler ve resimler dahil olmak üzere bir dizi yerleşik alan sağlar. Kendi alanlarınızı da oluşturabilirsiniz.

→ Yerleşik alanlar hakkında daha fazla bilgi edinin.

→ Özel alan oluşturma hakkında daha fazla bilgi edinin.

Simgeler

Simgeler, blokla ilgili "meta" bilgileri gösteren bir bloktaki kullanıcı arayüzü öğelerini tanımlar.

Simgeler, addIcon kullanılarak bloka eklenir.

Blockly, yorum simgeleri ve uyarı simgeleri dahil olmak üzere bir dizi yerleşik simge sağlar. Kendi simgelerinizi de oluşturabilirsiniz.

→ Özel simge oluşturma hakkında daha fazla bilgi edinin.

İpuçları

İpuçları, kullanıcı faresini bloğun üzerine getirdiğinde anında yardım sunar. Metin uzunsa otomatik olarak kaydırılır.

JSON

{
  // ...,
  "tooltip": "Tooltip text."
}

JavaScript

init: function() {
  this.setTooltip("Tooltip text.");
}

JavaScript API'de ipuçları, statik bir dize yerine bir işlev olarak da tanımlanabilir. Bu, dinamik yardıma olanak tanır. Hangi açılır liste seçeneğinin kullanıldığına bağlı olarak değişen bir ipucu örneği için math_arithmetic bölümüne bakın.

JavaScript

Blockly.Blocks['math_arithmetic'] = {
  init: function() {
    // ...

    // Assign 'this' to a variable for use in the tooltip closure below.
    var thisBlock = this;
    this.setTooltip(function() {
      var mode = thisBlock.getFieldValue('OP');
      var TOOLTIPS = {
        'ADD': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_ADD,
        'MINUS': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_MINUS,
        'MULTIPLY': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_MULTIPLY,
        'DIVIDE': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_DIVIDE,
        'POWER': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_POWER
      };
      return TOOLTIPS[mode];
    });
  }
};

JavaScript API'si kullanıldığında bloklar, ipucu dizesi döndüren statik bir dize yerine bir işlev belirtebilir. Bu şekilde dinamik ipuçları sağlanır. Örnek için bkz. math_arithmetic.

Özelleştirme

Özel bir oluşturma işlevi sağlayarak araç ipucularınızın görünümünü de özelleştirebilirsiniz. İki parametreyi kabul eden bir işlev oluşturun:

  • Öncelikle, içeriği oluşturacağınız bir <div> öğesi
  • ikinci olarak, fareyle üzerine gelinen ve öğrenmeniz için ipucunu göstereceğiniz

İşlevin gövdesinde, div içinde istediğiniz içeriği oluşturabilirsiniz. Fareyle üzerine gelinen blokta tanımlanan ipucu dizesini almak için Blockly.Tooltip.getTooltipOfObject(element); yöntemini çağırabilirsiniz. Burada element, yukarıdaki ikinci parametredir.

Son olarak, Blockly'nin uygun zamanda çağırabilmesi için bu işlevi kaydedin:

Blockly.Tooltip.setCustomTooltip(yourFnHere);

Örnek için Özel Araç İpuçları demosunu inceleyin.

Yardım URL'si

Engellemelerle ilişkilendirilmiş bir yardım sayfası olabilir. Bu özellik, bloğu sağ tıklayıp içerik menüsünden "Yardım"ı seçerek Blockly Web kullanıcıları tarafından kullanılabilir. Bu değer null ise menü devre dışı olur.

JSON

{
  // ...,
  "helpUrl": "https://en.wikipedia.org/wiki/For_loop"
}

JavaScript

init: function() {
  // ...
  this.setHelpUrl('https://en.wikipedia.org/wiki/For_loop');
}

JavaScript API'si kullanıldığında bloklar, bir URL dizesi döndüren ve böylece dinamik yardıma olanak tanıyan statik bir dize yerine bir işlev belirtebilir.

İşleyicileri ve Doğrulayıcıları Değiştirme

Engellemeler, çalışma alanında yapılan herhangi bir değişiklikte (engelle ilgili olmayanlar dahil) çağrılan değişiklik işleyici işlevlerine sahip olabilir. Bunlar temel olarak engellemenin uyarı metnini veya çalışma alanı dışındaki benzer bir kullanıcı bildirimini ayarlamak için kullanılır.

İşlev, setOnChange işlevini bir işlevle çağırarak eklenir ve işlevi tüm platformlarda kullanmayı planlıyorsanız başlatma sırasında veya bir JSON uzantısı aracılığıyla yapılabilir.

JSON

{
  // ...,
  "extensions":["warning_on_change"],
}

Blockly.Extensions.register('warning_on_change', function() {
  // Example validation upon block change:
  this.setOnChange(function(changeEvent) {
    if (this.getInput('NUM').connection.targetBlock()) {
      this.setWarningText(null);
    } else {
      this.setWarningText('Must have an input block.');
    }
  });
});

JavaScript

Blockly.Blocks['block_type'] = {
  init: function() {
    // Example validation upon block change:
    this.setOnChange(function(changeEvent) {
      if (this.getInput('NUM').connection.targetBlock()) {
        this.setWarningText(null);
      } else {
        this.setWarningText('Must have an input block.');
      }
    });
  }
}

Sistem, değişiklik etkinliğini ileterek işlevi çağırır. İşlevin içinde this, blok örneğini ifade eder.

İşlev, herhangi bir değişiklikte çağrıldığından, kullanılması durumunda geliştiriciler dinleyicinin hızlı bir şekilde çalıştığından emin olmalıdır. Ayrıca çalışma alanında, dinleyiciye dönüşebilecek veya geri dönebilecek değişiklikler konusunda da dikkatli olunmalıdır.

Örnekler için controls_flow_statements, logic_compare ve procedures_ifreturn bloklarına bakın.

Düzenlenebilir alanların, giriş doğrulaması ve yan etkilere neden olan kendi etkinlik işleyicilerine sahip olduğunu unutmayın.

Mutatör

Mutatörler, gelişmiş blokların şekli değiştirmesine izin verir. Özellikle de kullanıcıların bileşenleri eklemek, kaldırmak veya yeniden düzenlemek için bir iletişim kutusu açması sonucunda ortaya çıkar. Mutatörler, mutator anahtarıyla JSON aracılığıyla eklenebilir.

JSON

{
  // ...,
  "mutator":"if_else_mutator"
}

Engelleme başına yapılandırma

Engelleme örnekleri, kullanıcıya karşı davranışlarını yapılandıran çeşitli özelliklere sahiptir. Bunlar, çalışma alanını alanın belirli özelliklerini yansıtacak şekilde sınırlandırmak (ör. tam olarak bir "başlangıç" etkinliği vardır) veya kullanıcının çabasına odaklanmak (ör. bir eğitim) için kullanılabilir.

Silinebilir Durumu

block.setDeletable(false);

Bu politika yanlış değerine ayarlanırsa kullanıcı engellemeyi silemez. Engellemeler, varsayılan olarak düzenlenebilir bir çalışma alanında silinebilir.

Tüm engellemeler (silinmeyenler de dahil) programatik olarak silinebilir:

block.dispose();

Düzenlenebilir Durum

block.setEditable(false);

Yanlış değerine ayarlandığında kullanıcı, engellemenin alanlarını (ör. açılır listeler ve metin girişleri) değiştiremez. Engellemeler, düzenlenebilir çalışma alanında varsayılan olarak düzenlenebilir.

Taşınabilir Durum

block.setMovable(false);

Yanlış değerine ayarlanırsa kullanıcı engellemeyi doğrudan taşıyamaz. Başka bir blokun alt öğesi olan taşınmaz bir blokun o blokla bağlantısı kesilemez, ancak üst blok taşınırsa üst bloğuyla birlikte taşınır. Bloklar, düzenlenebilir çalışma alanında varsayılan olarak taşınabilirdir.

Tüm bloklar (taşınmazlar dahil) çalışma alanına geldikten sonra programatik olarak taşınabilir.

block.moveBy(dx, dy)

Çalışma alanındaki bir bloğun başlangıç konumu varsayılan olarak (0, 0) olur.

Verileri engelle

this.data = '16dcb3a4-bd39-11e4-8dfc-aa07a5b093db';

Veri, bloka eklenmiş isteğe bağlı ve rastgele bir dizedir. Blok serileştirildiğinde veri dizesi o blokla serileştirilir. Buna, blokun kopyalanması veya kopyalanıp yapıştırılması da dahildir.

Bu özellik genellikle bir engellemeyi harici bir kaynakla ilişkilendirmek için kullanılır.

JSON'a dönüştürüldüğünde veriler blokta üst düzey bir mülk olarak depolanır:

{
  "type": "my_block",
  "data": "16dcb3a4-bd39-11e4-8dfc-aa07a5b093db",
  // etc..
}

XML'e (eski buz kutusu serilendirme sistemi) serileştirildiğinde veri dizesi, blok içindeki bir <data></data> etiketinde depolanır:

<block type="my_block">
  <data>16dcb3a4-bd39-11e4-8dfc-aa07a5b093db</data>
  <!-- etc... -->
</block>

Yıkım

Engellemelerde, çalışma alanından silindiklerinde çağrılan bir destroy kancası bulunur. Bu özellik, blokla ilişkili destekleyici veri modellerini/harici kaynakları ortadan kaldırmak için kullanılabilir.

JSON

{
  // ...,
  "extensions":["destroy"],
}

Blockly.Extensions.registerMixin('destroy', {
  destroy: function() {
    this.myResource.dispose();
  }
});

JavaScript

Blockly.Blocks['block_type'] = {
  destroy: function() {
    this.myResource.dispose();
  }
}

destroy yöntemi, engellemenin üst öğesi atıldıktan sonra ancak alt öğeleri veya alanları silinmeden önce çağrılır.

İçerik Menüleri

Varsayılan olarak, bloklarda, kullanıcıların yorum ekleme veya blokları tekrarlama gibi işlemler yapmasına olanak tanıyan bir sağ tıklama içerik menüsü vardır.

Tek bir bloğun içerik menüsünü aşağıdakileri yaparak devre dışı bırakabilirsiniz:

block.contextMenu = false;

Menüde gösterilen seçenekleri de özelleştirebilirsiniz. Menüyü tüm bloklar için özelleştirmek istiyorsanız bağlam menüleri dokümanlarına bakın. Menüyü tek bir blok için özelleştirmek isterseniz customContextMenu kodunu uygulayabilirsiniz. Bu işlev, bir dizi menü seçeneğini alır ve yerinde değiştirir. Bu, hem öğe ekleyip kaldırabileceğiniz anlamına gelir.

Her menü seçeneği, üç özelliği olan bir nesnedir:

  • text görünen metindir.
  • enabled bir boole'dir. Devre dışı bırakıldığında, seçenek gri metinle gösterilir.
  • callback, seçenek tıklandığında çağrılacak işlevdir.