Drop-down-Felder

Im Drop-down-Feld wird ein String als Wert und ein String als Text gespeichert. Die value ist ein sprachneutraler Schlüssel, der für den Zugriff auf den Text und wird nicht übersetzt, wenn Blockly zwischen den Sprachen wechselt. Der Text lautet Ein für Menschen lesbarer String, der dem Nutzer angezeigt wird.

Drop-down-Feld

Drop-down-Feld mit geöffnetem Editor

Drop-down-Feld in minimiertem Block

Erstellung

Der Dropdown-Konstruktor verwendet einen Menügenerator und einen optionalen validator zu haben. Der Menügenerator enthält viele im Grunde ein Array von Optionen, wobei jede Option ein menschenlesbarer Teil und ein sprachneutraler String.

Einfache Text-Drop-downs

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

Trennung der visuell lesbaren Informationen vom sprachneutralen Schlüssel ermöglicht, die Einstellung des Drop-down-Menüs zwischen den Sprachen beizubehalten. Für -Instanz kann eine englische Version eines Blocks [['left', 'LEFT'], ['right', 'RIGHT]] definieren, während eine deutsche Version desselben Blocks [['links', 'LEFT'], ['rechts', 'RIGHT]] definieren würde.

Drop-down-Menüs für Bilder

Optionen in einem Dropdown-Menü können auch Bilder anstelle von Text enthalten. Bildobjekte sind angegeben mit den Properties src, width, height und alt.

Ein Drop-down-Menü kann eine Mischung aus Text- und Bildoptionen enthalten. Eine einzelne Option kann derzeit nicht sowohl ein Bild als auch Text enthalten.

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

Dynamische Drop-down-Menüs

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

Dazu wird eine JSON-Datei verwendet, Erweiterung.

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

Ein Drop-down-Menü kann auch mit einer Funktion anstelle einer Liste statischer Elemente bereitgestellt werden. Optionen, sodass die Optionen dynamisch sind. Die Funktion sollte eine Array von Optionen im selben [human-readable-value, language-neutral-key] als statische Optionen formatieren. Bei jedem Klick auf das Drop-down-Menü wird die Funktion ausgeführt und die Optionen werden neu berechnet.

Hinweis: Der Präfix-/Suffixabgleich erfolgt bei dynamische Drop-down-Menüs.

Serialisierung

JSON

Die JSON-Datei für ein Drop-down-Feld sieht so aus:

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

Dabei ist FIELDNAME ein String, der auf ein Drop-down-Feld verweist, und Wert ist der Wert, der auf das Feld angewendet werden soll. Der Wert sollte ein sprachneutralen Optionsschlüssel.

XML

Der XML-Code für ein Dropdown-Feld sieht so aus:

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

Wenn das Attribut name des Felds einen String enthält, der auf ein Drop-down-Menü verweist und der innere Text ist der Wert, der auf das Feld angewendet werden soll. Das innere text sollte ein gültiger sprachneutraler Optionsschlüssel sein.

Anpassung

Drop-down-Pfeil

Mit dem Attribut Blockly.FieldDropdown.ARROW_CHAR kann Folgendes geändert werden: Unicode-Zeichen für den Drop-down-Pfeil.

Die Eigenschaft ARROW_CHAR ist unter Android auf Android und \u25BE (▾) standardmäßig auf \u25BC (▼) gesetzt. sonst.

Dies ist eine globale Eigenschaft, daher werden alle Dropdown-Felder geändert, wenn sie festgelegt wird.

Menühöhe

Mit dem Attribut Blockly.FieldDropdown.MAX_MENU_HEIGHT_VH können Sie die maximale Höhe des Menüs. Sie wird als Prozentsatz des Darstellungsbereichs definiert Höhe, wobei der Darstellungsbereich das Fenster ist.

Das Attribut MAX_MENU_HEIGHT_VH hat den Standardwert „0,45“.

Dies ist eine globale Eigenschaft, daher werden alle Dropdown-Felder geändert, wenn sie festgelegt wird.

Präfix-/Suffixabgleich

Wenn alle Optionen des Drop-down-Menüs ein gemeinsames Präfix und/oder Suffix haben werden diese Wörter automatisch ausgerechnet und als statischer Text eingefügt. Hier sind zwei Möglichkeiten, um denselben Block zu erstellen (die erste ohne Suffixabgleich und das zweite mit:

Ohne Suffixabgleich:

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

Mit Suffixabgleich:

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

Ein Vorteil dieses Ansatzes besteht darin, dass der Block leichter in in anderen Sprachen. Der frühere Code hat die Strings 'hello', 'world' und 'computer', während der überarbeitete Code die Strings 'hello world' und 'hello computer' Übersetzer können Sätze viel einfacher übersetzen und Wörter isoliert betrachten.

Ein weiterer Vorteil dieses Ansatzes besteht darin, dass sich die Wortreihenfolge häufig zwischen Sprachen. Stellen Sie sich eine Sprache vor, in der 'world hello' und 'computer hello' verwendet wurden. Der Algorithmus für den Suffixabgleich erkennt den gemeinsamen 'hello' und zeigt ihn an auf das Drop-down-Menü ein.

Manchmal schlägt der Präfix-/Suffixabgleich jedoch fehl. Es gibt einige Fälle, in denen müssen zwei Wörter immer zusammen stehen und das Präfix nicht außer Acht gelassen werden. Zum Beispiel sollten 'drive red car' und 'drive red truck' wohl nur 'drive' und nicht 'drive red' berücksichtigt wurden. Abweichende Unicode-Datei Leerzeichen '\u00A0' kann anstelle eines normalen Leerzeichens verwendet werden, um den Parameter Präfix-/Suffix-Matcher. Daher kann das obige Beispiel mit 'drive red\u00A0car' und 'drive red\u00A0truck'.

Der Präfix-/Suffixabgleich schlägt auch in Sprachen fehl, einzelne Wörter durch Leerzeichen zu trennen. Chinesisch ist ein gutes Beispiel. Die Zeichenfolge '訪問中國' steht für 'visit China'. Beachte, dass zwischen den Wörtern keine Leerzeichen vorhanden sind. Die letzten beiden Zeichen ('中國') sind zusammengenommen das Wort für 'China', Bei Aufteilung würden sie 'centre' und 'country' bedeuten. Um Der Präfix-/Suffixabgleich funktioniert in Sprachen wie Chinesisch, fügen Sie einfach an der Stelle, an der die Pause eingefügt werden soll, ein Leerzeichen ein. Beispiel: '訪問 中國' und '訪問 美國' ergibt "visit [China/USA]", während '訪問 中 國' und '訪問 美 國' würde zu "visit [centre/beautiful] country" führen.

Drop-down-Validator erstellen

Hinweis :Informationen zu Validatoren im Allgemeinen finden Sie unter Validatoren.

Der Wert eines Drop-down-Felds ist ein sprachneutraler String. einen String akzeptieren und einen String zurückgeben, der eine verfügbare Option ist, null oder undefined.

Wenn die Validierung etwas anderes zurückgibt, ist das Verhalten von Blockly nicht definiert und kann Ihr Programm abstürzen.

Sie können beispielsweise ein Drop-down-Feld mit drei Optionen und einem Validator wie hier gezeigt:

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 gibt immer den übergebenen Wert zurück, ruft jedoch das Hilfsprogramm auf. Funktion updateConnection, mit der Eingaben basierend auf dem Drop-down-Menü hinzugefügt oder entfernt werden Wert:

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