Ajuda sobre bloqueio

Você pode fornecer ajuda de bloco na forma de dicas e um URL de ajuda.

Dicas

As dicas oferecem ajuda instantânea quando o usuário passa o cursor sobre o bloco. Se o texto for longo, ele será quebrado automaticamente.

JSON

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

JavaScript

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

Na API JavaScript, as dicas também podem ser definidas como uma função em vez de uma string estática. Isso permite ajuda dinâmica. Consulte math_arithmetic para conferir um exemplo de dica que muda dependendo da opção do menu suspenso escolhida.

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

Usando a API JavaScript, os blocos podem especificar uma função, em vez de uma string estática, que retorna a string da dica. Isso permite dicas dinâmicas. Consulte math_arithmetic para conferir um exemplo.

Personalização

Também é possível personalizar a aparência das dicas de ferramentas fornecendo uma função de renderização personalizada. Crie uma função que aceite dois parâmetros:

  • Primeiro, um elemento <div> em que você vai renderizar o conteúdo
  • Em segundo lugar, o elemento real sobre o qual o mouse está passando e para o qual você vai mostrar a dica

No corpo da função, você pode renderizar qualquer conteúdo que quiser no div. Para receber a string de dica definida no bloco sobre o qual o mouse está passando, chame Blockly.Tooltip.getTooltipOfObject(element);, em que element é o segundo parâmetro acima.

Por fim, registre essa função para que o Blockly possa chamá-la no momento certo:

Blockly.Tooltip.setCustomTooltip(yourFnHere);

Para conferir um exemplo, consulte a demonstração de dicas personalizadas.

URL da ajuda

Os blocos podem ter uma página de ajuda associada. Para acessar essa informação, os usuários podem clicar com o botão direito do mouse no bloco e selecionar "Help" no menu de contexto. Se esse valor for null, o item "Help" não será mostrado.

JSON

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

JavaScript

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

Usando a API JavaScript, os blocos podem especificar uma função, em vez de uma string estática, que retorna uma string de URL, permitindo ajuda dinâmica.