Bantuan pemblokiran

Anda dapat memberikan bantuan pemblokiran dalam bentuk tooltip dan URL bantuan.

Tooltip

Tooltip menawarkan bantuan instan saat pengguna mengarahkan kursor ke blok. Jika panjang, teks akan digabungkan secara otomatis.

JSON

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

JavaScript

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

Di JavaScript API, tooltip juga dapat ditentukan sebagai fungsi, bukan string statis. Hal ini memungkinkan bantuan dinamis. Lihat math_arithmetic untuk contoh tooltip yang berubah bergantung pada opsi dropdown yang telah dipilih.

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

Dengan menggunakan JavaScript API, blok dapat menentukan fungsi, bukan string statis, yang menampilkan string tooltip. Hal ini memungkinkan tooltip dinamis. Lihat math_arithmetic sebagai contoh.

Penyesuaian

Anda juga dapat menyesuaikan tampilan tooltip dengan menyediakan fungsi rendering kustom. Buat fungsi yang menerima dua parameter:

  • pertama, elemen <div> tempat Anda akan merender konten
  • kedua, elemen sebenarnya yang diarahkan kursor mouse dan yang akan menampilkan tooltip untuknya

Dalam isi fungsi, Anda dapat merender konten apa pun yang Anda sukai ke dalam div. Untuk mendapatkan string tooltip yang ditentukan pada blok yang diarahkan mouse, Anda dapat memanggil Blockly.Tooltip.getTooltipOfObject(element); dengan element adalah parameter kedua di atas.

Terakhir, daftarkan fungsi ini agar Blockly dapat memanggilnya pada waktu yang tepat:

Blockly.Tooltip.setCustomTooltip(yourFnHere);

Sebagai contoh, lihat Demo Tooltip Kustom.

URL Bantuan

Blok dapat memiliki halaman bantuan yang terkait dengannya. Fitur ini tersedia bagi pengguna dengan mengklik kanan blok dan memilih "Bantuan" dari menu konteks. Jika nilai ini null, item "Bantuan" tidak akan ditampilkan.

JSON

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

JavaScript

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

Dengan menggunakan JavaScript API, blok dapat menentukan fungsi, bukan string statis, yang menampilkan string URL, sehingga memungkinkan bantuan dinamis.