Blockly

Blockly is a graphical “block” based UI primarilarly designed as a programming teaching aid. However, because the blocks are easily extendable, Blockly can be used for many differing projects.

Blockly is a Google visual programming environment which is easily configurable to provide a drag-and-drop toolbox suitable for various tasks within many applications.

Blockly is written in HTML5 and can be embedded into apps or (static) sites with easy.

It is extensible in a way that allows extra ‘blocks’ (wiith their own semantics) and code generation to be added. (& unnecessary blocks to be hidden.)

• Getting Started guide
• Documentation on the XML side of Blockly’s structure (.v. the JSON which is used to define blocks)

Links

• Introduction to Blockly
• Creating custom blocks
• Blockly Developer Tools
  • Docs
  • Site, use blockly to create blocks
  • Usage video

Blockly API Workshop (The Noughts & Crosses Example)

The Toolbox

• Configuring

 <xml id="toolbox" style="display: none">
  <category name="Control">
    <block type="controls_if"></block>
    <block type="controls_whileUntil"></block>
    <block type="controls_for">
  </category>
  <category name="Logic">
    <block type="logic_compare"></block>
    <block type="logic_operation"></block>
    <block type="logic_boolean"></block>
  </category>
</xml>

Dynamic toolbox categories are also supported (Which are calculated everytime the specified category is opened) or via workspace.updateToolbox(newTree)

Notes for developers

1. Use the online Blockly Developer Tools provided by Google to create blocks. It’s good for all but the most complicated of blocks and is significantly faster to use than hand coding. Also save as JavaScript, not JSON as you can the perform JS injection etc (if necessary).

2. When using the designed make a note of the URL given in the ‘link’ icon - store this with the code as it is then possible to go back to the online design to tweak the code.

Importing & Exporting XML

//define your variable:
var XMLCodeMirror = CodeMirror.fromTextArea($('#your textarea').get(0));

//loading from the textbox
$('#button name').click(function() {
    var toload = XMLCodeMirror.getValue();

    var success = loadxml(toload);
});

function loadxml(xml) {
    if (typeof xml != "string" || xml.length < 5) {
        alert("No Input");
        return false;
        return;
    }
    try {
        var dom = Blockly.Xml.textToDom(xml);
        Blockly.mainWorkspace.clear();
        Blockly.Xml.domToWorkspace(Blockly.mainWorkspace, dom);
        return true;
    } catch (e) {
        alert("Invalid xml");
        return false;
   }
}