ड्रॉपडाउन फ़ील्ड

ड्रॉपडाउन फ़ील्ड में, स्ट्रिंग को वैल्यू के तौर पर और स्ट्रिंग को टेक्स्ट के तौर पर सेव किया जाता है. वैल्यू एक लैंग्वेज न्यूट्रल कुंजी है. इसका इस्तेमाल टेक्स्ट ऐक्सेस करने के लिए किया जाएगा. ब्लॉकली को एक भाषा से दूसरी भाषा में स्विच करने पर, इसका अनुवाद नहीं होगा. टेक्स्ट एक स्ट्रिंग होती है, जिसे कोई भी व्यक्ति आसानी से पढ़ सकता है. यह उपयोगकर्ता को दिखाया जाता है.

शॉर्ट वीडियो

ड्रॉपडाउन कंस्ट्रक्टर, मेन्यू जनरेटर और एक वैकल्पिक validator के तौर पर काम करता है. मेन्यू जनरेटर में बहुत ज़्यादा विकल्प होते हैं, लेकिन यह विकल्पों का एक कलेक्शन है. हर विकल्प में ऐसा हिस्सा होता है जिसे इंसान पढ़ सकता है, और एक लैंग्वेज न्यूट्रल स्ट्रिंग होती है.

सिंपल टेक्स्ट ड्रॉपडाउन

ड्रॉपडाउन को दो टेक्स्ट विकल्पों के साथ खोलें

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');
  }
};

इंसान के पढ़ने लायक जानकारी को लैंग्वेज न्यूट्रल बटन से अलग रखने से ड्रॉपडाउन मेन्यू की सेटिंग को भाषाओं के बीच सुरक्षित रखा जा सकता है. उदाहरण के लिए, किसी ब्लॉक का अंग्रेज़ी वर्शन [['left', 'LEFT'], ['right', 'RIGHT]] को परिभाषित कर सकता है, जबकि उसी ब्लॉक का जर्मन वर्शन [['links', 'LEFT'], ['rechts', 'RIGHT]] को परिभाषित करेगा.

इमेज के ड्रॉपडाउन

ड्रॉपडाउन मेन्यू के विकल्प में टेक्स्ट के बजाय इमेज भी हो सकती हैं. इमेज ऑब्जेक्ट के बारे में src, width, height, और alt प्रॉपर्टी तय की गई हैं.

ध्यान दें कि ड्रॉपडाउन में टेक्स्ट के विकल्प और इमेज के विकल्प, दोनों हो सकते हैं. फ़िलहाल, एक अलग विकल्प में इमेज और टेक्स्ट, दोनों शामिल नहीं हो सकते.

इमेज और टेक्स्ट वाला ड्रॉपडाउन फ़ील्ड

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');
  }
};

डाइनैमिक ड्रॉपडाउन

हफ़्ते के दिनों वाला ड्रॉपडाउन फ़ील्ड

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');
  });

ऐसा JSON एक्सटेंशन का इस्तेमाल करके किया जाता है.

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;
  }
};

स्टैटिक विकल्पों की सूची के बजाय, फ़ंक्शन के साथ भी ड्रॉपडाउन दिया जा सकता है. इससे विकल्पों को डाइनैमिक बनाया जा सकता है. फ़ंक्शन को, स्टैटिक विकल्पों के तौर पर, उसी [human-readable-value, language-neutral-key] फ़ॉर्मैट में कई विकल्पों की जानकारी दिखानी चाहिए. जब भी ड्रॉपडाउन पर क्लिक किया जाता है, फ़ंक्शन चलता है और विकल्पों का फिर से हिसाब लगाया जाता है.

सीरियलाइज़ेशन

JSON

ड्रॉपडाउन फ़ील्ड के लिए JSON, ऐसा दिखता है:

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

जहां FIELDNAME एक स्ट्रिंग है जो किसी ड्रॉपडाउन फ़ील्ड का रेफ़रंस देती है और वैल्यू वह वैल्यू होती है जिसे फ़ील्ड पर लागू किया जाना है. वैल्यू की वैल्यू, भाषा के विकल्प की न्यूट्रल होनी चाहिए.

XML

ड्रॉपडाउन फ़ील्ड के लिए एक्सएमएल ऐसा दिखता है:

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

जहां फ़ील्ड के name एट्रिब्यूट में ड्रॉपडाउन फ़ील्ड का रेफ़रंस देने वाली स्ट्रिंग होती है और अंदरूनी टेक्स्ट वह वैल्यू होती है जिसे फ़ील्ड पर लागू किया जाता है. इनर टेक्स्ट एक मान्य भाषा-न्यूट्रल विकल्प कुंजी होना चाहिए.

पसंद के मुताबिक बनाएं

Blockly.FieldDropdown.ARROW_CHAR प्रॉपर्टी का इस्तेमाल करके, ड्रॉपडाउन ऐरो को दिखाने वाले यूनिकोड कैरेक्टर को बदला जा सकता है.

कस्टम ऐरो वाला ड्रॉपडाउन फ़ील्ड

Android पर ARROW_CHAR प्रॉपर्टी डिफ़ॉल्ट रूप से \u25BC (▼) पर सेट होती है और \u25BE (gclsrc) नहीं रहती.

यह एक ग्लोबल प्रॉपर्टी है. इसलिए, सेट होने पर यह सभी ड्रॉपडाउन फ़ील्ड में बदलाव कर देगी.

Blockly.FieldDropdown.MAX_MENU_HEIGHT_VH प्रॉपर्टी का इस्तेमाल, मेन्यू की ज़्यादा से ज़्यादा ऊंचाई बदलने के लिए किया जा सकता है. इसे व्यूपोर्ट की ऊंचाई के प्रतिशत के रूप में तय किया जाता है जो व्यूपोर्ट है, जो विंडो है.

MAX_MENU_HEIGHT_VH प्रॉपर्टी डिफ़ॉल्ट तौर पर 0.45 पर सेट होती है.

यह एक ग्लोबल प्रॉपर्टी है. इसलिए, सेट होने पर यह सभी ड्रॉपडाउन फ़ील्ड में बदलाव कर देगी.

प्रीफ़िक्स/सफ़िक्स मैचिंग

अगर ड्रॉपडाउन मेन्यू के सभी विकल्पों में एक जैसे प्रीफ़िक्स और/या सफ़िक्स वाले शब्द हैं, तो ये शब्द अपने-आप फ़ैक्टर आउट हो जाते हैं और उन्हें स्टैटिक टेक्स्ट के तौर पर शामिल कर लिया जाता है. उदाहरण के लिए, एक ही ब्लॉक बनाने के दो तरीके यहां बताए गए हैं (यह पहला, सफ़िक्स मैचिंग के बिना और दूसरा इनके साथ):

प्रत्यय मिलान के बिना:

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');
  }
};

सफ़िक्स मैचिंग के साथ:

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');
  }
};

ड्रॉपडाउन फ़ील्ड में

इस तरीके का एक फ़ायदा यह है कि ब्लॉक की मदद से दूसरी भाषाओं में आसानी से अनुवाद किया जा सकता है. पुराने कोड में 'hello', 'world', और 'computer' स्ट्रिंग हैं, जबकि बदले गए कोड में 'hello world' और 'hello computer' स्ट्रिंग हैं. अनुवादकों के लिए शब्दों की तुलना में वाक्यांशों का अनुवाद करना ज़्यादा आसान होता है.

इस तरीके का एक और फ़ायदा यह है कि अलग-अलग भाषाओं में अक्सर शब्दों का क्रम बदलता रहता है. मान लें कि किसी ऐसी भाषा में 'world hello' और 'computer hello' का इस्तेमाल किया गया हो. सफ़िक्स मैचिंग एल्गोरिदम सामान्य 'hello' का पता लगाएगा और उसे ड्रॉप-डाउन के बाद दिखाएगा.

हालांकि, कभी-कभी प्रीफ़िक्स/सफ़िक्स मैच नहीं हो पाता. कुछ ऐसे मामले होते हैं जहां दो शब्दों को हमेशा एक साथ रखा जाना चाहिए और प्रीफ़िक्स को फ़ैक्टर में नहीं डालना चाहिए. उदाहरण के लिए, 'drive red car' और 'drive red truck' को सिर्फ़ 'drive' फ़ैक्टर आउट किया जाना चाहिए, न कि 'drive red' को. प्रीफ़िक्स/सफ़िक्स मैचर को दबाने के लिए, सामान्य स्पेस की जगह यूनिकोड नॉन-ब्रेकिंग स्पेस '\u00A0' का इस्तेमाल किया जा सकता है. इस तरह, ऊपर दिए गए उदाहरण को 'drive red\u00A0car' और 'drive red\u00A0truck' से ठीक किया जा सकता है.

एक और जगह जहां प्रीफ़िक्स/फ़िक्स मैच नहीं हो पाते वह उन भाषाओं में है जो अलग-अलग शब्दों को स्पेस से अलग नहीं करती. चाइनीज़ एक अच्छा उदाहरण है. स्ट्रिंग '訪問中國' का मतलब 'visit China' है. ध्यान दें कि शब्दों के बीच स्पेस की कमी है. कुल मिलाकर, आखिरी दो वर्ण ('中國'), 'China' के लिए हैं. हालांकि, अगर इन्हें अलग-अलग किया जाता है, तो इनका मतलब 'centre' और 'country' होगा. चीनी जैसी भाषाओं में प्रीफ़िक्स/सफ़िक्स मिलान के लिए, आपको बस वहां खाली जगह बनानी होगी जहां ब्रेक होना चाहिए. उदाहरण के लिए, '訪問 中國' और '訪問 美國' का नतीजा "visit [China/USA]" मिलेगा, जबकि '訪問 中 國' और '訪問 美 國' का नतीजा "visit [centre/beautiful] country" में मिलेगा.

ड्रॉपडाउन की पुष्टि करने वाला प्रोग्राम बनाना

ड्रॉपडाउन फ़ील्ड की वैल्यू, लैंग्वेज न्यूट्रल स्ट्रिंग होती है. इसलिए, पुष्टि करने वाले किसी भी टूल को ऐसी स्ट्रिंग स्वीकार करनी होगी जो उसे स्वीकार करे और जो उपलब्ध विकल्प उपलब्ध हो, null या undefined दिखाए.

अगर पुष्टि करने वाला टूल कोई और नतीजा दिखाता है, तो Blockly के काम करने के तरीके के बारे में नहीं बताया गया है. ऐसा होने पर, आपका प्रोग्राम बंद हो सकता है.

उदाहरण के लिए, तीन विकल्पों वाला ड्रॉपडाउन फ़ील्ड और इस तरह का एक पुष्टि करने वाला टूल तय किया जा सकता है:

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 हमेशा वह वैल्यू दिखाता है जो पास की गई है. हालांकि, यह हेल्पर फ़ंक्शन updateConnection को कॉल करता है. यह ड्रॉपडाउन वैल्यू के आधार पर इनपुट जोड़ता या हटाता है:

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');
  }
}