blockly开发之hello world(0)


#1

转载自blockly开发之hello world(0)

之前在blockly入门与介绍中,对blockly做了一番介绍,讨论了在技术视角之下,blockly是什么、可以做哪些有趣的事

在这篇文章里,我们将以一个开发者的视角,开始blockly之旅

开始之前

关于blockly是什么,上边的文章里提到过,在此重申一下(敲黑板): blockly是一个编辑器

The web-based visual programming editor

blockly作为编辑器,它的输入为用户对积木的拖曳操作(用户拖曳积木作为一种输入,可以类比为用户在普通编辑器的键盘输入),输出为积木的组合方式(可转化为对应代码)。使用blockly可以快速打造一个特定领域的可视化 块编程 编辑器

至于积木(block)如何生成代码,代码用于什么用途,blockly则通通不关心,由用户自己掌控。

quickstart

git clone https://github.com/google/blockly --depth=1
cd blockly/demos
# open index.html

打开index.html之后,将看到

这儿给出了一些很棒的案例,供开发者入门

Fixed Blockly是最简单的例子,可以视为blockly的hello world (把blockly编辑器注入到html中的div标签中:id="blocklyDiv")

我们用这个编辑器来写一个简单的程序: 如果5+6等于11就输出"恭喜你, 蒙对啦",否则输出"小学数学是语文老师教的吗"

目前这段程序还不能运行,在之后的章节里,之后我们会让它run起来

查看源码也只短短的一屏:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Blockly Demo: Fixed Blockly</title>
  <script src="../../blockly_compressed.js"></script>
  <script src="../../blocks_compressed.js"></script>
  <script src="../../msg/js/en.js"></script>
  <style>
    body {
      background-color: #fff;
      font-family: sans-serif;
    }
    h1 {
      font-weight: normal;
      font-size: 140%;
    }
  </style>
</head>
<body>
  <h1><a href="https://developers.google.com/blockly/">Blockly</a> &gt;
    <a href="../index.html">Demos</a> &gt; Fixed Blockly</h1>

  <p>This is a simple demo of injecting Blockly into a fixed-sized 'div' element.</p>

  <p>&rarr; More info on <a href="https://developers.google.com/blockly/guides/configure-blockly/web/fixed-size">injecting fixed-sized Blockly</a>&hellip;</p>

  <div id="blocklyDiv" style="height: 480px; width: 600px;"></div>

  <xml id="toolbox" style="display: none">
    <block type="controls_if"></block>
    <block type="logic_compare"></block>
    <block type="controls_repeat_ext"></block>
    <block type="math_number"></block>
    <block type="math_arithmetic"></block>
    <block type="text"></block>
    <block type="text_print"></block>
  </xml>

  <script>
    var demoWorkspace = Blockly.inject('blocklyDiv',
        { media: '../../media/',
          toolbox: document.getElementById('toolbox')}
        );
  </script>

</body>
</html>

这些代码里,真正有用的只有一半,分以下几块说明:

依赖文件

head中只有这几个依赖

  <script src="../../blockly_compressed.js"></script>
  <script src="../../blocks_compressed.js"></script>
  <script src="../../msg/js/en.js"></script>

分别说明:

  • <script src="../../blockly_compressed.js"></script> 是Blockly内核文件。
  • <script src="../../blocks_compressed.js"></script> 是基础积木集(blocks_compressed中定义了一些基础积木: 类似print、if、list等,我们可以在自己的js脚本中自定义更多的积木)
  • <script src="../../msg/js/en.js"></script>是英语语言包。目前40多门语言

js脚本名称中的compressed表示它们都被压缩过,可读性差。如果你想看积木积木是怎么定义的,可以使用chrome开发者面板的pretty print功能查看源码

积木箱(toolbox)

在积木面板中引入我们需要的积木

  <xml id="toolbox" style="display: none">
    <block type="controls_if"></block>
    <block type="logic_compare"></block>
    <block type="controls_repeat_ext"></block>
    <block type="math_number"></block>
    <block type="math_arithmetic"></block>
    <block type="text"></block>
    <block type="text_print"></block>
  </xml>

这些积木都预定义在<script src="../../blocks_compressed.js"></script>

至于如何自定一自己的积木,我们也放到之后的章节中说明. 诚信写作:),说好写hello world,就绝不不引入太多概念

往页面注入编辑器

页面中准备好注入点: <div id="blocklyDiv" style="height: 480px; width: 600px;"></div>

之后将编辑器注入页面即可

    var demoWorkspace = Blockly.inject('blocklyDiv',
        { media: '../../media/',
          toolbox: document.getElementById('toolbox')}
        );

这段js代码的语意是:往blocklyDiv中注入Blockly编辑器,积木箱的id为toolbox,media文件目录为../../media/(包括一些图标文件和声音文件)

总结

在这篇文章我们看到了一个blockly的最小案例。

在下一篇系列文章中,我们准备让上边写的那么程序run起来,使用这个程序来看看你的小学数学是不是语文老师教的

延伸

我最近在写一份blockly的入门和进阶教程,这个官方例子都被我纳入教程中,作为blockly hello world:blockly_1_hello_world,目前教程以源码的形式出现:wwj718/blockly_dev,还没写成博客。大家能阅读js的话,可以自行阅读。或者等我有空补上文章

参考