Example of mutator to expose additional value inputs?
523 views
Skip to first unread message
Charles Parker
Apr 11, 2017, 4:45:50 PM4/11/17
to Blockly
I have a block which has many named optional inputs, which I would like to hide, initially, and then the user can use the gear to add them as needed. I am new to Blockly, but I have read the documentation on mutators, and I have examined the source code for the "lists_create_with" block, which seems to be closest to what I want. I just can't quite seem to connect the dots...
Please and thanks!
vantest...@gmail.com
Apr 12, 2017, 2:27:27 AM4/12/17
to Blockly
Hi Charles
When I started with mutators, I had some difficulty too.
For getting to know how they a little bit better I started with copying the existisng code.
In your case:
Go in code to (for example when working with Javascript) generators - javascript - lists.js and find the block lists_create_with.
Copy this block (you can leave it in the lists.js when you're trying it out).
This is the location which generates the code for your block. Leave it be for now.
Go in code to blocks - lists.js and find the 3 Blockly.blocks starting with lists_create_with.
Copy these blocks and again leave them in the same file.
This is the location which generates the look for your block. leave it be for now.
Go in code to tests - playground.html
Search for this line of code <block type="lists_create_with"></block> and duplicate the line.
When you open the playground.html in browser you can find your duplicated block.
Now for the fun part:
Go back to blocks - lists.js and find your duplicated code.
You have 3 blocks within this code:
The main block (lists_create_with) with the 3 slots, the workblock (lists_create_with_container) behind the gear and the item block (lists_create_with_item) you can drag on the gear.
Here you make the changes you want for these blocks.
I strongly recommend you use the developer tools (https://blockly-demo.appspot.com/static/demos/blockfactory/index.html) for making blocks. (it's pretty easy when you follow the documentation)
You can test out the look and feel in the browser.
When you want to make changes to the generated code, go back to generators - javascript - lists.js and find your duplicated block.
Here you change the code you want to be generated. (it's kind of hard at start but you will grow fondly of it after a while)
When you don't understand how to do this, look at other blocks and try different things out while generating in the browser.
I hope this helps,
Walter
Op dinsdag 11 april 2017 22:45:50 UTC+2 schreef Charles Parker:
When I started with mutators, I had some difficulty too.
For getting to know how they a little bit better I started with copying the existisng code.
In your case:
Go in code to (for example when working with Javascript) generators - javascript - lists.js and find the block lists_create_with.
Copy this block (you can leave it in the lists.js when you're trying it out).
This is the location which generates the code for your block. Leave it be for now.
Go in code to blocks - lists.js and find the 3 Blockly.blocks starting with lists_create_with.
Copy these blocks and again leave them in the same file.
This is the location which generates the look for your block. leave it be for now.
Go in code to tests - playground.html
Search for this line of code <block type="lists_create_with"></block> and duplicate the line.
When you open the playground.html in browser you can find your duplicated block.
Now for the fun part:
Go back to blocks - lists.js and find your duplicated code.
You have 3 blocks within this code:
The main block (lists_create_with) with the 3 slots, the workblock (lists_create_with_container) behind the gear and the item block (lists_create_with_item) you can drag on the gear.
Here you make the changes you want for these blocks.
I strongly recommend you use the developer tools (https://blockly-demo.appspot.com/static/demos/blockfactory/index.html) for making blocks. (it's pretty easy when you follow the documentation)
You can test out the look and feel in the browser.
When you want to make changes to the generated code, go back to generators - javascript - lists.js and find your duplicated block.
Here you change the code you want to be generated. (it's kind of hard at start but you will grow fondly of it after a while)
When you don't understand how to do this, look at other blocks and try different things out while generating in the browser.
I hope this helps,
Walter
Op dinsdag 11 april 2017 22:45:50 UTC+2 schreef Charles Parker:
Charles Parker
Apr 13, 2017, 12:33:44 AM4/13/17
to Blockly
Walter, thanks! This helps immensely. I still can't say I understand the underlying mechanism, but at least you have given me the ability to copy and modify, which will be the source of learning.
Reply all
Reply to author
Forward
0 new messages