Değişkenler

Değişkenler, programlamada önemli bir kavramdır. Blockly, Python ve JavaScript gibi dinamik olarak yazılmış dilleri destekler. Biraz daha çalışmayla Java veya C gibi güçlü yazılmış dilleri (veya statik olarak yazılmış dilleri) desteklemek için bilgi ekleyebilirsiniz.

Dinamik ve statik olarak yazılmış diller hakkında daha fazla bilgiyi burada bulabilirsiniz.

Blockly, kullanıcının sağladığı değişkenlerin adlarını gösteren dinamik açılır kutular olan değişken alanları sağlar. Aşağıda buna örnek bir içerik verilmiştir.

Değişken seçmek, mevcut değişkenin adını değiştirmek veya mevcut değişkeni silmek için açılır menü içeren bir değişken alanı.

Blockly varsayılan olarak bir değişkene herhangi bir türün atanmasına izin verir ve Blockly'nin sağladığı tüm oluşturucular dinamik olarak yazılmış diller içindir. Bunun yerine yazılı bir dil kullanıyorsanız aşağıdakileri yaparak Blockly'yi bu dili destekleyecek şekilde yapılandırabilirsiniz:

Türlendirilmemiş Değişken Blokları

Bir değişkene erişmek ve değişkeni değiştirmek için en temel bloklar, alıcı ve ayarlayıcı bloklarıdır. Blockly'nin sağladığı alıcı ve ayarlayıcı bloklarını inceleyelim.

JSON

// Block for variable getter.
{
  "type": "variables_get",
  "message0": "%1",
  "args0": [
    {    // Beginning of the field variable dropdown
      "type": "field_variable",
      "name": "VAR",    // Static name of the field
      "variable": "%{BKY_VARIABLES_DEFAULT_NAME}"    // Given at runtime
    }    // End of the field variable dropdown
  ],
  "output": null,    // Null means the return value can be of any type
  ...
},

// Block for variable setter.
{
  "type": "variables_set",
  "message0": "%{BKY_VARIABLES_SET}",
  "args0": [
    {
      "type": "field_variable",
      "name": "VAR",
      "variable": "%{BKY_VARIABLES_DEFAULT_NAME}"
    },
    {
      "type": "input_value",    // This expects an input of any type
      "name": "VALUE"
    }
  ],
  ...
}

JavaScript

// Block for variable getter.
Blockly.Blocks['variables_get'] = {
  init: function() {
    this.appendDummyInput()
      .appendField(new Blockly.FieldVariable("VAR_NAME"), "FIELD_NAME");
    this.setOutput(true, null);
    ...
  }
};

// Block for variable setter.
Blockly.Blocks['variables_set'] = {
  init: function() {
    this.appendValueInput("NAME")
        .setCheck(null)
        .appendField("set")
        .appendField(new Blockly.FieldVariable("VAR_NAME"), "FIELD_NAME")
        .appendField("to");
    this.setOutput(true, null);
    ...
  }
};

Bu işlem aşağıdaki iki bloğu oluşturur:

"foo" değişkeni için alıcı ve ayarlayıcı blokları.

Değişken alıcısının "çıktısı"nı null olarak ayarlayarak döndürülen değerin herhangi bir türde olabileceğini unutmayın. Ayrıca, değişken ayarlayıcının girişinde herhangi bir kontrol belirtilmediğini unutmayın. Sonuç olarak, değişken herhangi bir değer türüne ayarlanabilir.

Yazılı Değişken Blokları

Tür kontrolünü zorunlu kılan alıcı ve ayarlayıcılar ekleyebilirsiniz. Örneğin, "Panda" türündeki bir değişken oluşturduysanız aşağıdaki tanımlar, uygun türlerde bir alıcı ve ayarlayıcı oluşturur.

JSON

 // Block for Panda variable getter.
 {
  "type": "variables_get_panda",
  "message0": "%1",
  "args0": [
    {
      "type": "field_variable",
      "name": "VAR",
      "variable": "%{BKY_VARIABLES_DEFAULT_NAME}",
      "variableTypes": ["Panda"],    // Specifies what types to put in the dropdown
      "defaultType": "Panda"
    }
  ],
  "output": "Panda",    // Returns a value of "Panda"
  ...
},

 // Block for Panda variable setter.
{
  "type": "variables_set_panda",
  "message0": "%{BKY_VARIABLES_SET}",
  "args0": [
    {
      "type": "field_variable",
      "name": "VAR",
      "variable": "%{BKY_VARIABLES_DEFAULT_NAME}",
      "variableTypes": ["Panda"],
      "defaultType": "Panda"
    },
    {
      "type": "input_value",
      "name": "VALUE",
      "check": "Panda"    // Checks that the input value is of type "Panda"
    }
  ],
  "previousStatement": null,
  "nextStatement": null,
  ...
}

JavaScript

// Block for variable getter.
Blockly.Blocks['variables_get_panda'] = {
  init: function() {
    this.appendDummyInput()
      .appendField(new Blockly.FieldVariable(
          "VAR_NAME", ['Panda'], 'Panda'), "FIELD_NAME");
    this.setOutput(true, 'Panda');
    ...
  }
};

// Block for variable setter.
Blockly.Blocks['variables_set_panda'] = {
  init: function() {
    this.appendValueInput("NAME")
        .setCheck('Panda')
        .appendField("set")
        .appendField(new Blockly.FieldVariable(
            "VAR_NAME", null, ['Panda'], 'Panda'), "FIELD_NAME")
        .appendField("to");
        this.setPreviousStatement(true, null);
        this.setNextStatement(true, null);
    ...
  }
};

Bu işlem, alıcı ve ayarlayıcı olmak üzere iki tür blok oluşturur. Açılır listelerinde yalnızca Panda türündeki değişkenler gösterilir. Giriş ve çıkışları yalnızca Panda türündeki bağlantıları kabul eder. Alanın defaultType özelliği, variableTypes dizisindeki değerlerden birine ayarlanmalıdır. variableTypes dizisi sağlarken defaultType ayarlanmazsa hata oluşur.

Varsayılan olarak, kullanıcıya hangi türün kullanıldığını belirten görsel bir gösterge yoktur. Değişken türlerini ayırt etmenin kolay bir yolu renk kullanmaktır.

Araç Kutusu'na Değişken Ekleme

Bu yeni değişken türünü kullanıcılarınız için yararlı hale getirmek amacıyla, yeni değişkenleri oluşturma ve kullanmanın bir yolunu eklemeniz gerekir.

Henüz yoksa değişkenler için yeni bir dinamik kategori oluşturun.

"Değişkenler" adlı açık bir kategoride "Değişken oluştur" düğmesi.

Yeni alıcı ve ayarlayıcılarınızı kategoriye ekleyin.

"foo" ve "bar" değişkenleri oluşturulduktan sonra aynı kategori. "Değişken oluştur" düğmesi, set-variable-to ve change-variable-by blokları ve alıcı blokları içerir.

Değişken Oluştur Düğmesi

Ardından, kullanıcınızın değişken oluşturabileceği bir yönteme ihtiyacı vardır. En kolay yöntem, "Değişken Oluştur" düğmesini kullanmaktır.

Düğmeyi oluştururken geri arama çağrısını yapın

Blockly.Variables.createVariableButtonHandler(button.getTargetWorkspace(), null, 'panda');

ve Panda türü bir değişken oluşturulur.

Kullanıcıların birden fazla türde değişken oluşturmasına izin vermenin en kolay yolu, tür başına bir "oluştur" düğmesi (ör. Dize Değişkeni Oluştur, Sayı Değişkeni Oluştur, Panda Değişkeni Oluştur) eklemektir.

İki veya üçten fazla değişken türünüz varsa çok fazla düğmeye sahip olabilirsiniz. Bu durumda, kullanıcıların istedikleri değişken türünü seçebilecekleri bir pop-up görüntülemek için @blockly/plugin-typed-variable-modal öğesini kullanabilirsiniz.

Jeneratörleri tanımlama

Son olarak, yeni değişken bloklarınız için blok kodu oluşturucuları tanımlamanız gerekir. Tüm türlerdeki tüm değişkenleri almak için Blockly.Workspace.getAllVariables() veya belirli bir türdeki tüm değişkenleri almak için Blockly.Workspace.getVariablesOfType() ile doğrudan değişken listesine de erişebilirsiniz.