Değişkenler

Değişkenler önemli bir programlama kavramıdır. Blockly, Python ve JavaScript gibi dinamik olarak yazılan dilleri destekler. Biraz ekstra çalışmayla da Java veya C gibi güçlü bir şekilde yazılan dilleri (veya statik tür dilleri) desteklemek için bilgi ekleyebilirsiniz.

Dyamik ve statik türlü 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ını sağlar. Aşağıda bir örnek verilmiştir.

Varsayılan olarak Blockly, bir değişkene her türün atanmasına izin verir ve Blockly'nin sağladığı tüm oluşturucular dinamik olarak yazılan dillere yöneliktir. Bunun yerine yazılan bir dil kullanıyorsanız aşağıdakileri yaparak Blockly'yi desteklenecek şekilde yapılandırabilirsiniz:

Yazılmamış Değişken Blokları

Bir değişkene erişmek ve bunu çalıştırmak için en temel bloklar, getter ve setter bloklarıdır. Blockly'nin sağladığı alıcı ve belirleyici blokların üzerinden geçelim.

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, aşağıdaki iki bloku oluşturur:

Dikkat edilmesi gereken önemli bir ayrıntı, değişken getter's "output" (çıktı) değeri null olarak ayarlandığında döndürülen değerin herhangi bir türde olabileceğidir. Ayrıca, değişken ayarlayıcının girişinin herhangi bir kontrol belirtmediğine dikkat edin. Sonuç olarak, değişken herhangi bir değer türüne ayarlanabilir.

Yazılan Değişken Blokları

Tür kontrolünü zorunlu kılan alıcı ve belirleyiciler ekleyebilirsiniz. Örneğin, "Panda" türünde bir değişken oluşturduysanız aşağıdaki tanımlar, uygun türlerle bir getter ve setter 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, bir alıcı ve bir setter olmak üzere iki tür blok oluşturur. Açılır menüleri yalnızca Panda türü değişkenlerini görüntüler. Giriş ve çıkışları yalnızca Panda türüyle bağlantıları kabul eder. Alanın defaultType değeri, variableTypes dizisindeki değerlerden biri olarak ayarlanmalıdır. variableTypes dizisi sağlarken defaultType ayarlamamak bir hataya neden olur.

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ç Kutusuna Değişken Ekleme

Bu yeni değişken türünü kullanıcılarınız için kullanışlı hale getirmek amacıyla yeni değişkenler oluşturma ve kullanma yöntemini eklemeniz gerekir.

Değişkenler için yeni bir dinamik kategori oluşturun (henüz yoksa).

Yeni kazanan ve belirleyicileri kategoriye ekleyin.

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

İkinci olarak, kullanıcınızın değişken oluşturmak için bir yönteme ihtiyacı vardır. En basit yol "Değişken Oluştur" düğmesini kullanmaktır.

Düğmeyi oluştururken geri çağırmayı yapın.

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

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

Kullanıcıların birden çok türde değişken oluşturmasına izin vermenin en kolay yolu, her tür için bir "oluştur" düğmesine (ör. Dize Değişkeni Oluştur, Sayı Değişkeni Oluştur, Panda Değişkeni Oluştur) sahip olmaktır.

İki veya üçten fazla değişken türünüz varsa kısa sürede çok fazla düğmeyle karşılaşabilirsiniz. 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 kullanabilirsiniz.

Jeneratörleri Tanımlayın

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