Açılır alanda, değer olarak bir dize ve metni olarak bir dize saklanır. Bu değer, metne erişmek için kullanılacak dil gerektirmeyen bir anahtardır ve Blockly diller arasında geçiş yaptığında çevrilmez. Metin, kullanıcıya gösterilecek, okunabilir bir dizedir.
Açılır alan
Düzenleyicinin açık olduğu açılır alan
Daraltılmış bloktaki açılır liste alanı
içerik üretimi
Açılır oluşturucu, bir menü oluşturucuyu ve isteğe bağlı bir validator alır. Menü oluşturucu pek çok esnekliğe sahiptir, ancak temel olarak her seçenek, kullanıcılar tarafından okunabilir bir bölüm ve dilden bağımsız bir dize içeren bir dizi seçenektir.
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 dilsiz anahtardan ayrı tutmak, açılır menü ayarının diller arasında korunmasını sağlar. Örneğin, bir bloğun İngilizce sürümü [['left', 'LEFT'], ['right',
'RIGHT]] tanımlarken aynı bloğun Almanca sürümü [['links',
'LEFT'], ['rechts', 'RIGHT]] tanımlar.
Resim açılır listeleri
Açılır menüdeki seçenekler, metin yerine resim de olabilir. Görüntü nesneleri src, width, height ve alt özellikleriyle belirtilir.
Açılır listelerde metin ve resim seçeneklerinin bir karışımı bulunabilse de tek bir seçeneğin şu anda hem resim hem de metin içeremeyeceğini unutmayın.
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 bir JSON uzantısı kullanılarak yapılır.
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;
}
};
Statik seçenekler listesi yerine, seçeneklerin dinamik olmasını sağlayan bir işlev içeren bir açılır liste de sağlanabilir. İşlev, statik seçeneklerle aynı [human-readable-value, language-neutral-key] biçiminde bir seçenek dizisi döndürmelidir. Açılır menü her tıklandığında işlev çalıştırılır ve seçenekler yeniden hesaplanır.
Serileştirme
JSON
Bir açılır liste alanı için JSON şöyle görünür:
{
"fields": {
"FIELDNAME": "LANGUAGE-NEUTRAL-KEY"
}
}
Burada FIELDNAME, açılır liste alanına referans veren bir dizedir. Değer ise alana uygulanacak değerdir. Değer, tek bir dil gerektirmeyen bir
seçenek anahtarı olmalıdır.
XML
Bir açılır liste alanı için XML şöyle 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çerirken iç metin alana uygulanacak değerdir. İç metin, geçerli bir dil duyarsı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 karakterini değiştirmek için kullanılabilir.
ARROW_CHAR özelliği, Android'de varsayılan olarak \u25BC (▼) ve \u25BE (▾) değerine ayarlanır.
Bu global bir mülk olduğu için ayarlandığında tüm açılır liste alanlarını değiştirir.
Menü yüksekliği
Blockly.FieldDropdown.MAX_MENU_HEIGHT_VH özelliği, menünün maksimum yüksekliğini değiştirmek için kullanılabilir. Görüntü alanı yüksekliğinin bir yüzdesi olarak tanımlanır.
Görüntü alanı, penceredir.
MAX_MENU_HEIGHT_VH özelliğinin varsayılan değeri 0,45'tir.
Bu global bir mülk olduğu için ayarlandığında tüm açılır liste alanlarını değiştirir.
Önek/sonek eşleşmesi
Tüm açılır menü seçenekleri ortak ön eki ve/veya son eki paylaşıyorsa bu kelimeler otomatik olarak göz ardı edilir ve statik metin olarak eklenir. Örneğin, aynı bloku iki şekilde oluşturabilirsiniz (ilki sonek eşleştirmesi olmadan, ikincisi sonek eşlemesi olmadan):
Son ek eşleştirme olmadan:
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ştirmede:
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 diğer dillere daha kolay çevrilmesidir. Önceki kod 'hello', 'world' ve 'computer' dizelerine sahipken düzeltilmiş kod 'hello world' ve 'hello computer' dizelerine sahiptir. Çevirmenlerin ifadeleri çevirmek, tek başına
kelimeler kullanmaktan çok daha kolay olmasını sağlar.
Bu yaklaşımın diğer bir avantajı,
kelime sırasının genellikle diller arasında değişmesidir. 'world hello' ve 'computer hello' dillerinin kullanıldığı bir dil düşünün.
Sonek eşleştirme algoritması, ortak 'hello' öğesini algılar ve bunu açılır menüden sonra gösterir.
Ancak bazen önek/sonek eşleşmesi başarısız olur. Bazı durumlarda iki kelime her zaman birlikte kullanılır ve önek çıkarılmaz.
Örneğin, 'drive red car' ve 'drive red truck' muhtemelen 'drive red' değil, yalnızca 'drive' öğelerini dikkate almamalıdır. Unicode için bölünmeyen boşluk '\u00A0', önek/sonek eşleyicisini gizlemek için normal bir boşluk yerine kullanılabilir. Dolayısıyla, yukarıdaki örnek 'drive red\u00A0car' ve 'drive red\u00A0truck' ile düzeltilebilir.
Önek/sonek eşleşmesinin başarısız olduğu bir başka yer de kelimeleri tek tek boşluklarla ayırmayan dillerdir. Çince iyi bir örnek. '訪問中國' dizesi 'visit China' anlamına gelir. kelimeler arasında boşluk olmadığına dikkat edin.
Son iki karakter ('中國') toplu olarak 'China' için kullanılan kelimedir. Ancak bölünme durumunda bunlar sırasıyla 'centre' ve 'country' anlamına gelir. Çince gibi dillerde önek/sonek eşleşmesinin çalışması için boşluk eklenmesi gereken yere boşluk eklemeniz yeterlidir. Örneğin, '訪問 中國' ve '訪問 美國' "visit [China/USA]" ile sonuçlanırken '訪問 中 國' ve '訪問 美 國' "visit [centre/beautiful] country" ile sonuçlanır.
Açılır liste doğrulayıcı oluşturma
Açılır liste alanının değeri, dil içermeyen bir dizedir. Bu nedenle, tüm doğrulayıcılar bir dizeyi kabul etmeli ve kullanılabilir bir seçenek olan, null veya undefined olan bir dize döndürmelidir.
Doğrulayıcınız başka bir şey döndürürse Blockly'nin davranışı tanımlanmaz ve programınız kilitlenebilir.
Örneğin, üç seçenekli bir açılır alan ve şunun gibi bir doğrulayıcı tanımlayabilirsiniz:
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 iletildiği değeri döndürür, ancak açılır menü değerine göre giriş ekleyen veya kaldıran yardımcı işlevi updateConnection çağırır:
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');
}
}
