Android：Blockly分析

公司要搞少儿编程，我记录下Blockly的一些东东

Blockly主页是怎么样的？

image.png

左边的菜单栏代码如下

  <xml xmlns="https://developers.google.com/blockly/xml" id="toolbox" style="display: none">
    <category name="Text" colour="%{BKY_TEXTS_HUE}">
      <block type="text"></block>
      <block type="text_length"></block>
      <block type="text_print"></block>
    </category>
    <category name="Logic" colour="%{BKY_LOGIC_HUE}">
      <block type="controls_if"></block>
      <block type="logic_compare"></block>
      <block type="logic_operation"></block>
      <block type="logic_negate"></block>
      <block type="logic_boolean"></block>
    </category>
    <category name="Loops" colour="%{BKY_LOOPS_HUE}">
      <block type="controls_repeat_ext">
        <value name="TIMES">
          <block type="math_number">
            <field name="NUM">10</field>
          </block>
        </value>
      </block>
      <block type="controls_whileUntil"></block>
    </category>
    <category name="Math" colour="%{BKY_MATH_HUE}">
      <block type="math_number">
        <field name="NUM">123</field>
      </block>
      <block type="math_arithmetic"></block>
      <block type="math_single"></block>
    </category>
  </xml>

就是说菜单栏的每一项是category，子菜单是block。

右边的积木拼图代码如下

<xml xmlns="https://developers.google.com/blockly/xml" id="startBlocks" style="display: none">
    <block type="controls_if" inline="false" x="20" y="20">
      <mutation else="1"></mutation>
      <value name="IF0">
        <block type="logic_compare" inline="true">
          <field name="OP">EQ</field>
          <value name="A">
            <block type="math_arithmetic" inline="true">
              <field name="OP">MULTIPLY</field>
              <value name="A">
                <block type="math_number">
                  <field name="NUM">6</field>
                </block>
              </value>
              <value name="B">
                <block type="math_number">
                  <field name="NUM">7</field>
                </block>
              </value>
            </block>
          </value>
          <value name="B">
            <block type="math_number">
              <field name="NUM">42</field>
            </block>
          </value>
        </block>
      </value>
      <statement name="DO0">
        <block type="text_print" inline="false">
          <value name="TEXT">
            <block type="text">
              <field name="TEXT">Hello</field>
            </block>
          </value>
        </block>
      </statement>
      <statement name="ELSE">
        <block type="text_print" inline="false">
          <value name="TEXT">
            <block type="text">
              <field name="TEXT">nihao</field>
            </block>
          </value>
        </block>
      </statement>
    </block>
  </xml>

简单分析一个block

image.png

这个block又好几个block组成，最外面的block是logic_compare，用来比较。
它由两个valule和一个field组成，field就是等于号，一个valule是6x7，另一个value是42。

一个block是怎么定义的？

在blocks\logic.js中定义的，例如一个用于比较的block

  // Block for comparison operator.
  {
    "type": "logic_compare",
    "message0": "%1 %2 %3",
    "args0": [
      {
        "type": "input_value",
        "name": "A"
      },
      {
        "type": "field_dropdown",
        "name": "OP",
        "options": [
          ["=", "EQ"],
          ["\u2260", "NEQ"],
          ["\u200F<", "LT"],
          ["\u200F\u2264", "LTE"],
          ["\u200F>", "GT"],
          ["\u200F\u2265", "GTE"]
        ]
      },
      {
        "type": "input_value",
        "name": "B"
      }
    ],
    "inputsInline": true,
    "output": "Boolean",
    "style": "logic_blocks",
    "helpUrl": "%{BKY_LOGIC_COMPARE_HELPURL}",
    "extensions": ["logic_compare", "logic_op_tooltip"]
  },

输入，输出都有吗？
args就是输入，output就是输出。完事了。

然后这些积木是怎么生成代码的？代码的定义在哪里？以生成python为例子
生成的代码都放在python_compressed.js，这些代码是自动生成的，通过build.py生成。

如何自定义block？？

简单简单，在blocks_compressed.js文件下加就可以了，例如简单的一个色块

Blockly.Blocks['wenfengblock'] = {
    init: function() {
      this.setColour(75);
   this.setTooltip("");
   this.setHelpUrl("");
    }
  };

image.png

然后再加到demos\generator\index.html里面引入

image.png

然后打开这个index.html就能看到效果啦！！一个绿绿的色块！！！

image.png

现在只加了色块，函数还没加，函数怎么加，后面再记录！