提示：获取blockly代码及基本的目录结构请先阅读可视化编程工具blockly——可调整大小的工作区
blockly通过拖动可视化的代码块来实现编程，普遍的应用场景是少儿编程，不过官方宣称blockly不是玩具，它可以实现复杂的编程任务；代码块只是提供了可视化的接口，最终执行的还是代码，blockly支持生成多种语言的代码，如JavaScript, Python, PHP, Lua, Dart，除此之外blockly拥有高度可定制化的特性，你还可以完全定制生成自己的所需的任何语言。本文以生成python语言为例进行演示，目前使用的内置的block。
定义工具箱
通过xml方式定义两个类别为文本和列表的工具箱，代码（index.html）及渲染的工具箱如下：
<xml xmlns="https://developers.google.com/blockly/xml" id="toolbox" style="display: none">
<category name="文本" colour="%{BKY_TEXTS_HUE}">
<block type="text"></block>
<block type="text_join"></block>
<block type="text_append">
<value name="TEXT">
<shadow type="text"></shadow>
</value>
</block>
<block type="text_length">
<value name="VALUE">
<shadow type="text">
<field name="TEXT">abc</field>
</shadow>
</value>
</block>
<block type="text_isEmpty">
<value name="VALUE">
<shadow type="text">
<field name="TEXT"></field>
</shadow>
</value>
</block>
<block type="text_indexOf">
<value name="VALUE">
<block type="variables_get">
<field name="VAR">{textVariable}</field>
</block>
</value>
<value name="FIND">
<shadow type="text">
<field name="TEXT">abc</field>
</shadow>
</value>
</block>
<block type="text_charAt">
<value name="VALUE">
<block type="variables_get">
<field name="VAR">{textVariable}</field>
</block>
</value>
</block>
<block type="text_getSubstring">
<value name="STRING">
<block type="variables_get">
<field name="VAR">{textVariable}</field>
</block>
</value>
</block>
<block type="text_changeCase">
<value name="TEXT">
<shadow type="text">
<field name="TEXT">abc</field>
</shadow>
</value>
</block>
<block type="text_trim">
<value name="TEXT">
<shadow type="text">
<field name="TEXT">abc</field>
</shadow>
</value>
</block>
<block type="text_print">
<value name="TEXT">
<shadow type="text">
<field name="TEXT">abc</field>
</shadow>
</value>
</block>
<block type="text_prompt_ext">
<value name="TEXT">
<shadow type="text">
<field name="TEXT">abc</field>
</shadow>
</value>
</block>
</category>
<category name="列表" colour="%{BKY_LISTS_HUE}">
<block type="lists_create_with">
<mutation items="0"></mutation>
</block>
<block type="lists_create_with"></block>
<block type="lists_repeat">
<value name="NUM">
<shadow type="math_number">
<field name="NUM">5</field>
</shadow>
</value>
</block>
<block type="lists_length"></block>
<block type="lists_isEmpty"></block>
<block type="lists_indexOf">
<value name="VALUE">
<block type="variables_get">
<field name="VAR">{listVariable}</field>
</block>
</value>
</block>
<block type="lists_getIndex">
<value name="VALUE">
<block type="variables_get">
<field name="VAR">{listVariable}</field>
</block>
</value>
</block>
<block type="lists_setIndex">
<value name="LIST">
<block type="variables_get">
<field name="VAR">{listVariable}</field>
</block>
</value>
</block>
<block type="lists_getSublist">
<value name="LIST">
<block type="variables_get">
<field name="VAR">{listVariable}</field>
</block>
</value>
</block>
<block type="lists_split">
<value name="DELIM">
<shadow type="text">
<field name="TEXT">,</field>
</shadow>
</value>
</block>
<block type="lists_sort"></block>
</category>
</xml>
google可视化编程工具blockly——生成代码
生成python
blockly/generators目录下的文件为生成的代码部分的代码，实际使用时引用
blockly/python_compressed.js提供的压缩版本即可
<script src="./blockly/blockly_compressed.js"></script> <!--blockly的核心代码-->
<script src="./blockly/blocks_compressed.js"></script> <!--代码块定义-->
<script src="./blockly/python_compressed.js"></script> <!--生成python代码-->
<script src="./blockly/msg/js/zh-hans.js"></script> <!--中文语言支持-->
生成python代码就是一条语句：
var code = Blockly.Python.workspaceToCode(workspace);
监听事件，实时刷新代码
blockly工作区生成代码的效率很高，为ms级，因此无需担心频繁更新代码导致性能问题，通常的做法是监听工具的change事件来实时生成代码，这里以在控制台输出为例：
function myUpdateFunction(event) {
var code = Blockly.Python.workspaceToCode(workspace); // 将工作区代码块生成代码
console.log(code); // 控制台显示生成的代码
}
workspace.addChangeListener(myUpdateFunction); // 监听工作区改变事件
浏览器打开index.html，向工作区中放置一些代码，控制台将会实时打印生成代码，如下是建立python列表的代码块及生成的代码：
google可视化编程工具blockly——生成代码
点击紫色代码块中的蓝色按钮可以持续增加列表的项目，生成的代码也会相相应的更新
google可视化编程工具blockly——生成代码
index.html完整的代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>blockly demo</title>
</head>
<body>
<div id="blocklyArea" style="min-height: 100vh;"></div>
<div id="blocklyDiv" style="position: absolute"></div>
<xml xmlns="https://developers.google.com/blockly/xml" id="toolbox" style="display: none">
<category name="文本" colour="%{BKY_TEXTS_HUE}">
<block type="text"></block>
<block type="text_join"></block>
<block type="text_append">
<value name="TEXT">
<shadow type="text"></shadow>
</value>
</block>
<block type="text_length">
<value name="VALUE">
<shadow type="text">
<field name="TEXT">abc</field>
</shadow>
</value>
</block>
<block type="text_isEmpty">
<value name="VALUE">
<shadow type="text">
<field name="TEXT"></field>
</shadow>
</value>
</block>
<block type="text_indexOf">
<value name="VALUE">
<block type="variables_get">
<field name="VAR">{textVariable}</field>
</block>
</value>
<value name="FIND">
<shadow type="text">
<field name="TEXT">abc</field>
</shadow>
</value>
</block>
<block type="text_charAt">
<value name="VALUE">
<block type="variables_get">
<field name="VAR">{textVariable}</field>
</block>
</value>
</block>
<block type="text_getSubstring">
<value name="STRING">
<block type="variables_get">
<field name="VAR">{textVariable}</field>
</block>
</value>
</block>
<block type="text_changeCase">
<value name="TEXT">
<shadow type="text">
<field name="TEXT">abc</field>
</shadow>
</value>
</block>
<block type="text_trim">
<value name="TEXT">
<shadow type="text">
<field name="TEXT">abc</field>
</shadow>
</value>
</block>
<block type="text_print">
<value name="TEXT">
<shadow type="text">
<field name="TEXT">abc</field>
</shadow>
</value>
</block>
<block type="text_prompt_ext">
<value name="TEXT">
<shadow type="text">
<field name="TEXT">abc</field>
</shadow>
</value>
</block>
</category>
<category name="列表" colour="%{BKY_LISTS_HUE}">
<block type="lists_create_with">
<mutation items="0"></mutation>
</block>
<block type="lists_create_with"></block>
<block type="lists_repeat">
<value name="NUM">
<shadow type="math_number">
<field name="NUM">5</field>
</shadow>
</value>
</block>
<block type="lists_length"></block>
<block type="lists_isEmpty"></block>
<block type="lists_indexOf">
<value name="VALUE">
<block type="variables_get">
<field name="VAR">{listVariable}</field>
</block>
</value>
</block>
<block type="lists_getIndex">
<value name="VALUE">
<block type="variables_get">
<field name="VAR">{listVariable}</field>
</block>
</value>
</block>
<block type="lists_setIndex">
<value name="LIST">
<block type="variables_get">
<field name="VAR">{listVariable}</field>
</block>
</value>
</block>
<block type="lists_getSublist">
<value name="LIST">
<block type="variables_get">
<field name="VAR">{listVariable}</field>
</block>
</value>
</block>
<block type="lists_split">
<value name="DELIM">
<shadow type="text">
<field name="TEXT">,</field>
</shadow>
</value>
</block>
<block type="lists_sort"></block>
</category>
</xml>
<script src="./blockly/blockly_compressed.js"></script>
<script src="./blockly/blocks_compressed.js"></script>
<script src="./blockly/python_compressed.js"></script>
<script src="./blockly/msg/js/zh-hans.js"></script>
<script>
var blocklyArea = document.getElementById('blocklyArea');
var blocklyDiv = document.getElementById('blocklyDiv');
var workspace = Blockly.inject(blocklyDiv,
{
media: './blockly/media/',
toolbox: document.getElementById('toolbox'),
grid:
{spacing: 20,
length: 3,
colour: '#ccc',
snap: true},
zoom:
{controls: true,
wheel: true,
startScale: 1.0,
maxScale: 3,
minScale: 0.3,
scaleSpeed: 1.2,
pinch: true},
trashcan: true
});
var onresize = function(e) {
// 计算blocklyArea元素的绝对坐标和尺寸
var element = blocklyArea;
var x = 0;
var y = 0;
do {
x += element.offsetLeft;
y += element.offsetTop;
element = element.offsetParent;
} while (element);
// 将blocklyDiv定位到blocklyArea区域上
blocklyDiv.style.left = x + 'px';
blocklyDiv.style.top = y + 'px';
blocklyDiv.style.width = blocklyArea.offsetWidth + 'px';
blocklyDiv.style.height = blocklyArea.offsetHeight + 'px';
Blockly.svgResize(workspace);
};
window.addEventListener('resize', onresize, false);
onresize();
Blockly.svgResize(workspace);
function myUpdateFunction(event) {
var code = Blockly.Python.workspaceToCode(workspace);
console.log(code);
}
workspace.addChangeListener(myUpdateFunction);
</script>
</body>
</html>
