Pomoc dotycząca blokowania

Możesz udostępnić pomoc dotyczącą blokowania w postaci etykiet i adresu URL pomocy.

Etykietki

Etykiety z podpowiedzią wyświetlają się, gdy użytkownik najedzie kursorem na blok. Jeśli tekst jest długi, zostanie automatycznie przeformatowany.

JSON

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

JavaScript

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

W interfejsie JavaScript API opisy mogą być definiowane jako funkcje zamiast statycznych ciągów tekstowych. Umożliwia to dynamiczną pomoc. Przykład etykiety, która zmienia się w zależności od wybranej opcji menu, znajdziesz na stronie math_arithmetic.

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

Korzystając z interfejsu JavaScript API, możesz określić funkcję zamiast stałego ciągu tekstowego, który zwraca tekst tooltipa. Umożliwia to tworzenie dynamicznych etykiet. Przykład znajdziesz w sekcji math_arithmetic.

Dostosowywanie

Możesz też dostosować wygląd etykiet za pomocą niestandardowej funkcji renderowania. Utwórz funkcję, która przyjmuje 2 parametry:

• Po pierwsze, element <div>, w którym renderujesz treści.
• Po drugie, rzeczywisty element, nad którym znajduje się kursor i dla którego chcesz wyświetlić tekst pomocniczy.

W treści funkcji możesz renderować dowolne treści w elemencie div. Aby uzyskać tekst tooltipa zdefiniowany w bloku, nad którym znajduje się kursor, możesz wywołać funkcję Blockly.Tooltip.getTooltipOfObject(element);, gdzie element to drugi parametr powyżej.

Na koniec zarejestruj tę funkcję, aby Blockly mógł ją wywołać we właściwym momencie:

Blockly.Tooltip.setCustomTooltip(yourFnHere);

Przykład znajdziesz w prezentacji niestandardowych etykiet pomocy.

URL pomocy

Z blokami można powiązać stronę pomocy. Użytkownicy mogą to zrobić, klikając blok prawym przyciskiem myszy i wybierając „Pomoc” z menu kontekstowego. Jeśli ta wartość to null, element „Pomoc” nie jest wyświetlany.

JSON

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

JavaScript

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

Za pomocą interfejsu JavaScript API bloki mogą określać funkcję zamiast statycznego ciągu znaków, który zwraca ciąg znaków adresu URL, co umożliwia dynamiczną pomoc.