حقول القائمة المنسدلة

يخزن حقل القائمة المنسدلة سلسلة كقيمتها وسلسلة كنص لها. تشير رسالة الأشكال البيانية عبارة عن مفتاح محايد اللغة سيتم استخدامه للوصول إلى النص لن تتم ترجمة المحتوى عند تبديل تطبيق Blockly بين اللغات. النص هو سلسلة يمكن لشخص عادي قراءتها وسيتم عرضها للمستخدم

حقل قائمة منسدلة

حقل القائمة المنسدلة والمحرر مفتوح

حقل قائمة منسدلة على مربّع تم تصغيره

الإنشاء

تأخذ الدالة الإنشائية القائمة المنسدلة منشئ قائمة وحقل اختياري مدقق. يحتوي منشئ القائمة على الكثير من المرونة، لكنها في الأساس مجموعة من الخيارات، يحتوي كل خيار على وجزء يمكن للإنسان قراءته وسلسلة محايدة لغة.

قوائم منسدلة نصية بسيطة

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

يظهر رمز XML الخاص بحقل القائمة المنسدلة على النحو التالي:

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

عندما تحتوي سمة name في الحقل على سلسلة تشير إلى قائمة منسدلة والنص الداخلي هو القيمة التي يجب تطبيقها على الحقل. الجزء الداخلي يجب أن يكون النص مفتاح خيار صالحًا ومحايدًا للغة.

التخصيص

سهم القائمة المنسدلة

يمكن استخدام السمة Blockly.FieldDropdown.ARROW_CHAR لتغيير حرف يونيكود يمثّل سهم القائمة المنسدلة.

يتم ضبط السمة ARROW_CHAR تلقائيًا على \u25BC (▼) على نظام التشغيل Android و\u25BE ( بإحدى القنوات (AE) وإلا.

هذه سمة عمومية، لذا ستعدِّل جميع حقول القائمة المنسدلة عند ضبطها.

ارتفاع القائمة

يمكن استخدام السمة 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

إذا عرض المدقق أي شيء آخر، فسيكون سلوك بلولي غير محدد فقد يتعطل برنامجك.

على سبيل المثال، يمكنك تحديد حقل قائمة منسدلة بثلاثة خيارات مدقّق كما يلي:

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