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

作者: 辣椒爸 | 来源:发表于2021-03-05 21:25 被阅读0次

图形化编程工具blockly——工作区
google可视化编程工具blockly——生成代码
可视化编程工具blockly——工具箱
google可视化编程工具blockly入门
JS-Interpreter 中文文档(翻译)
【blockly教程】第三章Blockly顺序程序设计
可视化编程工具blockly——尺寸大小可变的工作区
【blockly教程】第五章循环结构
Blockly 代码生成
Blockly 中文文档(翻译)

提示：获取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>

图形化编程工具blockly——工作区
下载blockly 关于什么是blockly请参见google可视化编程工具blockly入门[https://w...
google可视化编程工具blockly——生成代码
提示：获取blockly代码及基本的目录结构请先阅读可视化编程工具blockly——可调整大小的工作区[https...
可视化编程工具blockly——工具箱
说明：1. blockly代码下载，基础代码建议先阅读可视化编程工具blockly——工作区[https://ww...
google可视化编程工具blockly入门
什么是blockly？ blockly是google发布的可视化编程工具，是一个基于web技术构建的库；block...
JS-Interpreter 中文文档(翻译)
JS-Interpreter 是主要配合 Google 的可视化编程工具 Blockly 的一个库这里翻译了它的文...
【blockly教程】第三章Blockly顺序程序设计
3.1 什么是Blockly语言 2012年6月，Google发布了完全可视化的编程语言Google Blockl...
可视化编程工具blockly——尺寸大小可变的工作区
这篇可视化编程工具blockly——工作区[https://www.toutiao.com/i6929465560...
【blockly教程】第五章循环结构
BLOCKLY系列教程：第一章 Google Blockly教学应用手册第二章 Blockly编程基础第三章...
Blockly 代码生成
Blockly 官方支持生成多种代码， javascript、python、lua等，这样子，初学者就可以通过拖拽...
Blockly 中文文档(翻译)
目录概述获取代码注入 Blockly 配置代码生成器引入和导出块云存储概述 Blockly 可以很容...