Search code examples
javascriptcode-generationblockly

How to add the "Functions tab" to Google's blockly

According to the Demo that comes with blockly, we only have logic, loops, maths and text options when generation our code. here: https://blockly-demo.appspot.com/static/demos/generator/index.html

How do I add the functions and variables tab since the documentation provide seems quite shallow. Documentation: https://developers.google.com/blockly/installation/code-generators

Thanks in advance!

Solution

  • The "menu items" or "tabs" on the left of blockly demos make up the "Toolbox" In order to add more items on the tool box, check https://developers.google.com/blockly/installation/toolbox

    For example, in the case of adding the Functions and Variables to the Toolbox, add the xml code below to your index.html.

    <category name="Variables" custom="VARIABLE"></category>
<category name="Functions" custom="PROCEDURE"></category>

    A little inspection of index.html will tell you where the xml code is compiled and you'll insert your code appropriately.