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

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

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

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

定义工具箱

生成python

监听事件，实时刷新代码

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读