Hilfe zum Blockieren

Sie können Hilfe zu Blockierungen in Form von Kurzinfos und einer Hilfe-URL bereitstellen.

Kurzinfos

Tooltips bieten sofortige Hilfe, wenn der Nutzer den Mauszeiger auf den Block bewegt. Wenn der Text lang ist, wird er automatisch umgebrochen.

JSON

{
  // ...,
  "tooltip": "Tooltip text."
}

JavaScript

init: function() {
  this.setTooltip("Tooltip text.");
}

In der JavaScript API können Kurzinfos auch als Funktion anstelle eines statischen Strings definiert werden. Das ermöglicht eine dynamische Hilfe. In math_arithmetic sehen Sie ein Beispiel für eine Kurzinfo, die sich je nach ausgewählter Drop-down-Option ändert.

JavaScript

Blockly.Blocks['math_arithmetic'] = {
  init: function() {
    // ...

    // Assign 'this' to a variable for use in the tooltip closure below.
    var thisBlock = this;
    this.setTooltip(function() {
      var mode = thisBlock.getFieldValue('OP');
      var TOOLTIPS = {
        'ADD': Blockly.Msg['MATH_ARITHMETIC_TOOLTIP_ADD'],
        'MINUS': Blockly.Msg['MATH_ARITHMETIC_TOOLTIP_MINUS'],
        'MULTIPLY': Blockly.Msg['MATH_ARITHMETIC_TOOLTIP_MULTIPLY'],
        'DIVIDE': Blockly.Msg['MATH_ARITHMETIC_TOOLTIP_DIVIDE'],
        'POWER': Blockly.Msg['MATH_ARITHMETIC_TOOLTIP_POWER']
      };
      return TOOLTIPS[mode];
    });
  }
};

Mit der JavaScript API können Blöcke eine Funktion anstelle eines statischen Strings angeben, der den String für die Kurzinfo zurückgibt. So lassen sich dynamische Kurzinfos erstellen. Ein Beispiel findest du in math_arithmetic.

Anpassen

Sie können das Aussehen Ihrer Kurzinfos auch anpassen, indem Sie eine benutzerdefinierte Renderingfunktion angeben. Erstellen Sie eine Funktion, die zwei Parameter akzeptiert:

• Erstens: ein <div>-Element, in dem Sie die Inhalte rendern
• Zweitens: das Element, auf das der Mauszeiger gerade zeigt und für das die Kurzinfo angezeigt werden soll.

Im Hauptteil der Funktion können Sie beliebige Inhalte in das div-Element rendern. Um den für den Block definierten Kurzinfo-String abzurufen, auf den die Maus bewegt wird, können Sie Blockly.Tooltip.getTooltipOfObject(element); aufrufen, wobei element der zweite Parameter oben ist.

Registrieren Sie diese Funktion abschließend, damit Blockly sie zur richtigen Zeit aufrufen kann:

Blockly.Tooltip.setCustomTooltip(yourFnHere);

Ein Beispiel finden Sie in der Demo für benutzerdefinierte Kurzinfos.

Hilfe-URL

Blöcke können mit einer Hilfeseite verknüpft sein. Nutzer können mit der rechten Maustaste auf den Block klicken und im Kontextmenü „Hilfe“ auswählen. Wenn dieser Wert null ist, wird das Element „Hilfe“ nicht angezeigt.

JSON

{
  // ...,
  "helpUrl": "https://en.wikipedia.org/wiki/For_loop"
}

JavaScript

init: function() {
  // ...
  this.setHelpUrl('https://en.wikipedia.org/wiki/For_loop');
}

Mit der JavaScript API können Blöcke eine Funktion anstelle eines statischen Strings angeben, der einen URL-String zurückgibt, wodurch eine dynamische Hilfe möglich ist.