google可视化编程工具blockly——生成代码

提示：获取blockly代码及基本的目录结构请先阅读可视化编程工具blockly——可调整大小的工作区

blockly通过拖动可视化的代码块来实现编程，普遍的应用场景是少儿编程，不过官方宣称blockly不是玩具，它可以实现复杂的编程任务；代码块只是提供了可视化的接口，最终执行的还是代码，blockly支持生成多种语言的代码，如JavaScript, Python, PHP, Lua, Dart，除此之外blockly拥有高度可定制化的特性，你还可以完全定制生成自己的所需的任何语言。本文以生成python语言为例进行演示，目前使用的内置的block。

定义工具箱

通过xml方式定义两个类别为文本和列表的工具箱，代码（index.html）及渲染的工具箱如下：

    
      
      
      
        
          
        
      
      
        
          
            abc
          
        
      
      
        
          
            
          
        
      
      
        
          
            {textVariable}
          
        
        
          
            abc
          
        
      
      
        
          
            {textVariable}
          
        
      
      
        
          
            {textVariable}
          
        
      
      
        
          
            abc
          
        
      
      
        
          
            abc
          
        
      
      
        
          
            abc
          
        
      
      
        
          
            abc
          
        
      
    
    
      
        
      
      
      
        
          
            5
          
        
      
      
      
      
        
          
            {listVariable}
          
        
      
      
        
          
            {listVariable}
          
        
      
      
        
          
            {listVariable}
          
        
      
      
        
          
            {listVariable}
          
        
      
      
        
          
            ,
          
        
      
      
    
  

google可视化编程工具blockly——生成代码

生成python

blockly/generators目录下的文件为生成的代码部分的代码，实际使用时引用
blockly/python_compressed.js提供的压缩版本即可

生成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完整的代码如下：

  
  
  
  


  

  

  
    
      
      
      
        
          
        
      
      
        
          
            abc
          
        
      
      
        
          
            
          
        
      
      
        
          
            {textVariable}
          
        
        
          
            abc
          
        
      
      
        
          
            {textVariable}
          
        
      
      
        
          
            {textVariable}
          
        
      
      
        
          
            abc
          
        
      
      
        
          
            abc
          
        
      
      
        
          
            abc
          
        
      
      
        
          
            abc
          
        
      
    
    
      
        
      
      
      
        
          
            5
          
        
      
      
      
      
        
          
            {listVariable}
          
        
      
      
        
          
            {listVariable}
          
        
      
      
        
          
            {listVariable}
          
        
      
      
        
          
            {listVariable}
          
        
      
      
        
          
            ,