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

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

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

ड्रॉपडाउन फ़ील्ड, जिसमें एडिटर खुला है

छोटे किए गए ब्लॉक पर ड्रॉपडाउन फ़ील्ड

शॉर्ट वीडियो

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

सामान्य टेक्स्ट के ड्रॉपडाउन

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 (lit) पर डिफ़ॉल्ट रूप से सेट हो जाती है नहीं तो.

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

मेन्यू की ऊंचाई

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