Açılır alanlar

Açılır alanda bir dize değeri ve metin olarak depolanır. İlgili içeriği oluşturmak için kullanılan value, metne erişmek için kullanılacak dilden bağımsız bir anahtardır ve Blockly diller arasında geçiş yaptığında çevrilmez. Metin, kullanıcının okuyabileceği bir dizedir.

Açılır alan

Düzenleyici açık olan açılır liste alanı

Daraltılmış bloktaki açılır liste alanı

içerik üretimi

Açılır liste oluşturucu, bir menü oluşturucuyu ve isteğe bağlı bir doğrulayıcı. Menü oluşturucuda çok sayıda ama aslında bu, her biri farklı bir işleve sahip olan okunabilir bir bölümü olur ve dilden bağımsız bir dize belirtir.

Basit metin açılır listeleri

JSON

{
  "type": "example_dropdown",
  "message0": "drop down: %1",
  "args0": [
    {
      "type": "field_dropdown",
      "name": "FIELDNAME",
      "options": [
        [ "first item", "ITEM1" ],
        [ "second item", "ITEM2" ]
      ]
    }
  ]
}

JavaScript

Blockly.Blocks['example_dropdown'] = {
  init: function() {
    this.appendDummyInput()
        .appendField('drop down:')
        .appendField(new Blockly.FieldDropdown([
            ['first item', 'ITEM1'],
            ['second item', 'ITEM2']
        ]), 'FIELDNAME');
  }
};

Kullanıcıların okuyabileceği bilgileri, dil içermeyen anahtardan ayrı tutmak açılır menünün ayarının diller arasında korunmasını sağlar. Örneğin, bir bloğun İngilizce sürümü [['left', 'LEFT'], ['right', 'RIGHT]] öğesini tanımlarken, aynı blokun Almanca sürümü [['links', 'LEFT'], ['rechts', 'RIGHT]] öğesini tanımlayabilir.

Resim açılır listeleri

Açılır menüdeki seçenekler metin yerine resim de olabilir. Resim nesneleri src, width, height ve alt özellikleriyle belirtilir.

Açılır menüde metin ve resim seçeneklerinin karışık olarak bulunabileceğini unutmayın. tek bir seçenek şu anda hem resim hem de metin içeremez.

JSON

{
  "type": "image_dropdown",
  "message0": "flag %1",
  "args0": [
    {
      "type": "field_dropdown",
      "name": "FLAG",
      "options": [
        ["none", "NONE"],
        [{"src": "canada.png", "width": 50, "height": 25, "alt": "Canada"}, "CANADA"],
        [{"src": "usa.png", "width": 50, "height": 25, "alt": "USA"}, "USA"],
        [{"src": "mexico.png", "width": 50, "height": 25, "alt": "Mexico"}, "MEXICO"]
      ]
    }
  ]
}

JavaScript

Blockly.Blocks['image_dropdown'] = {
  init: function() {
    var input = this.appendDummyInput()
        .appendField('flag');
    var options = [
        ['none', 'NONE'],
        [{'src': 'canada.png', 'width': 50, 'height': 25, 'alt': 'Canada'}, 'CANADA'],
        [{'src': 'usa.png', 'width': 50, 'height': 25, 'alt': 'USA'}, 'USA'],
        [{'src': 'mexico.png', 'width': 50, 'height': 25, 'alt': 'Mexico'}, 'MEXICO']
    ];
    input.appendField(new Blockly.FieldDropdown(options), 'FLAG');
  }
};

Dinamik açılır listeler

JSON

{
  "type": "dynamic_dropdown",
  "message0": "day %1",
  "args0": [
    {
      "type": "input_dummy",
      "name": "INPUT"
    }
  ],
  "extensions": ["dynamic_menu_extension"]
}

Blockly.Extensions.register('dynamic_menu_extension',
  function() {
    this.getInput('INPUT')
      .appendField(new Blockly.FieldDropdown(
        function() {
          var options = [];
          var now = Date.now();
          for(var i = 0; i < 7; i++) {
            var dateString = String(new Date(now)).substring(0, 3);
            options.push([dateString, dateString.toUpperCase()]);
            now += 24 * 60 * 60 * 1000;
          }
          return options;
        }), 'DAY');
  });

Bu işlem JSON kullanılarak yapılır uzantı'yı seçin.

JavaScript

Blockly.Blocks['dynamic_dropdown'] = {
  init: function() {
    var input = this.appendDummyInput()
      .appendField('day')
      .appendField(new Blockly.FieldDropdown(
        this.generateOptions), 'DAY');
  },

  generateOptions: function() {
    var options = [];
    var now = Date.now();
    for(var i = 0; i < 7; i++) {
      var dateString = String(new Date(now)).substring(0, 3);
      options.push([dateString, dateString.toUpperCase()]);
      now += 24 * 60 * 60 * 1000;
    }
    return options;
  }
};

Açılır liste, statik bir liste yerine bir fonksiyon da sağlayabilir kullanabilirsiniz. Bu, seçeneklerin dinamik olmasını sağlar. İşlev, aynı [human-readable-value, language-neutral-key] içindeki seçenekler dizisi biçimini kullanabilirsiniz. Açılır menü her tıklandığında, işlev ve seçenekler yeniden hesaplanır.

Not: Önek/sonek eşleşmesi, açılır menüleri tıklayın.

Serileştirme

JSON

Açılır liste alanının JSON'u aşağıdaki gibi görünür:

{
  "fields": {
    "FIELDNAME": "LANGUAGE-NEUTRAL-KEY"
  }
}

Burada FIELDNAME, açılır alana referans veren bir dizedir ve değer, alana uygulanacak değerdir. Değer şöyle olmalıdır: dil içermeyen seçenek tuşuna basın.

XML

Açılır liste alanı için XML aşağıdaki gibi görünür:

<field name="FIELDNAME">LANGUAGE-NEUTRAL-KEY</field>

Alanın name özelliği, açılır listeye referans veren bir dize içerdiğinde alanı, iç metin ise alana uygulanacak değerdir. İç metin, geçerli bir dilden bağımsız seçenek anahtarı olmalıdır.

Özelleştirme

Açılır ok

Blockly.FieldDropdown.ARROW_CHAR özelliği, açılır oku temsil eden unicode karakteri.

ARROW_CHAR özelliği, Android'de varsayılan olarak \u25BC (▼) ve \u25BE (▾) değerine ayarlanır. aksi takdirde.

Bu global bir mülktür, bu nedenle ayarlandığında tüm açılır listeler değiştirilir.

Menü yüksekliği

Blockly.FieldDropdown.MAX_MENU_HEIGHT_VH özelliği, menünün maksimum yüksekliğine eşittir. Görüntü alanının yüzdesi olarak tanımlanır yükseklik, görüntü alanının pencere olduğu anlamına gelir.

MAX_MENU_HEIGHT_VH özelliğinin varsayılan değeri 0,45'tir.

Bu global bir mülktür, bu nedenle ayarlandığında tüm açılır listeler değiştirilir.

Önek/sonek eşleştirme

Tüm açılır menü seçenekleri ortak ön ek ve/veya son eki paylaşıyorsa bu kelimeler otomatik olarak dışlanır ve statik metin olarak eklenir. Örneğin, burada aynı bloku oluşturmanın iki yolu (bu ilk önce sonek eşleşmesi ve ikincisinde şunlar bulunur):

Sonek eşleştirme yapılmazsa:

JSON

{
  "type": "dropdown_no_matching",
  "message0": "hello %1",
  "args0": [
    {
      "type": "field_dropdown",
      "name": "MODE",
      "options": [
        ["world", "WORLD"],
        ["computer", "CPU"]
      ]
    }
  ]
}

JavaScript

Blockly.Blocks['dropdown_no_matching'] = {
  init: function() {
    var options = [
      ['world', 'WORLD'],
      ['computer', 'CPU']
    ];

    this.appendDummyInput()
        .appendField('hello')
        .appendField(new Blockly.FieldDropdown(options), 'MODE');
  }
};

Sonek eşleştirmeyle:

JSON

{
  "type": "dropdown_with_matching",
  "message0": "%1",
  "args0": [
    {
      "type": "field_dropdown",
      "name": "MODE",
      "options": [
        ["hello world", "WORLD"],
        ["hello computer", "CPU"]
      ]
    }
  ]
}

JavaScript

Blockly.Blocks['dropdown_with_matching'] = {
  init: function() {
    var options = [
      ['hello world', 'WORLD'],
      ['hello computer', 'CPU']
    ];

    this.appendDummyInput()
        .appendField(new Blockly.FieldDropdown(options), 'MODE');
  }
};

Bu yaklaşımın avantajlarından biri, blokun çevrilmesi daha kolay olmasıdır. yardımcı olur. Önceki kod; 'hello', 'world' ve 'computer', düzeltilmiş kod ise 'hello world' ve dizelerini içerir. 'hello computer'. Çevirmenler de kelime öbeğini çevirmeye kıyasla, somut olarak ortaya koyar.

Bu yaklaşımın başka bir avantajı da, kelime sırasının dil. 'world hello' ve 'computer hello' kullanılan bir dil düşünün. Sonek eşleştirme algoritması, yaygın 'hello' ifadesini algılar ve gösterir tıklayın.

Ancak bazen ön ek/sonek eşleştirmesi başarısız olur. Bazı durumlarda iki kelime her zaman birlikte gelmeli ve önek dikkate alınmamalıdır. Örneğin 'drive red car' ve 'drive red truck' muhtemelen yalnızca 'drive red' değil 'drive' dikkate alınır. Unicode'da bölünmez '\u00A0' boşluğu, normal bir boşluk yerine bu alanın önek/sonek eşleştiricisi. Dolayısıyla, yukarıdaki örnek 'drive red\u00A0car' ve 'drive red\u00A0truck'.

Önek/sonek eşleştirmenin başarısız olduğu bir başka nokta da sözcükleri boşluklarla ayırın. Çince iyi bir örnek. Dize '訪問中國', 'visit China' anlamına gelir. Kelimeler arasında boşluk olmamasına dikkat edin. Toplu olarak son iki karakter ('中國') 'China' kelimesidir, ancak bölündüğünde sırasıyla 'centre' ve 'country' anlamına gelir. Şunun için: gibi dillerde yazılmış ön ek/sonek eşleştirmesi boşluk ekleyin. Örneğin '訪問 中國' ve '訪問 美國' metriği "visit [China/USA]", '訪問 中 國' ve '訪問 美 國' sonucu "visit [centre/beautiful] country" olur.

Açılır liste doğrulayıcı oluşturma

Not: Genel olarak doğrulayıcılar hakkında bilgi edinmek için Doğrulayıcılar başlıklı makaleyi inceleyin.

Açılır liste alanının değeri dilden bağımsız bir dizedir. Bu nedenle tüm doğrulayıcılar bir dizeyi kabul eder ve kullanılabilir bir seçenek olan null veya undefined.

Doğrulayıcınız başka bir değer döndürürse Blockly'nin davranışı tanımlanmamış olur ve kilitlenebilir.

Örneğin, üç seçenek ve bir şuna benzer:

validate: function(newValue) {
  this.getSourceBlock().updateConnections(newValue);
  return newValue;
},

init: function() {
  var options = [
   ['has neither', 'NEITHER'],
   ['has statement', 'STATEMENT'],
   ['has value', 'VALUE'],
  ];

  this.appendDummyInput()
  // Pass the field constructor the options list, the validator, and the name.
      .appendField(new Blockly.FieldDropdown(options, this.validate), 'MODE');
}

validate, her zaman geçirildiği değeri döndürür ancak yardımcıyı çağırır açılır listeye göre girişleri ekleyen veya kaldıran updateConnection işlevi değer:

updateConnections: function(newValue) {
  this.removeInput('STATEMENT', /* no error */ true);
  this.removeInput('VALUE', /* no error */ true);
  if (newValue == 'STATEMENT') {
    this.appendStatementInput('STATEMENT');
  } else if (newValue == 'VALUE') {
    this.appendValueInput('VALUE');
  }
}