blockly自定义块简单实现

最新推荐文章于 2022-10-03 14:04:45 发布

番茄V王子

最新推荐文章于 2022-10-03 14:04:45 发布

阅读量4k

点赞数 1

分类专栏： blockly JavaScript

本文链接：https://blog.csdn.net/tomato3351/article/details/104916879

版权

JavaScript 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

blockly

1 篇文章 0 订阅

订阅专栏

blockly自定义块支持使用json和JS，本文使用JS。

自定义块需要两个部分，blocks和generators。要看效果可以新建自己的index.html。

一、自定义块的步骤

1.在blocks/文件夹下新建文件myblocks.js文件，写入

'use strict';

goog.require('Blockly.Blocks');
goog.require('Blockly');

Blockly.Blocks['init_myblock']={
	init:function(){
		this.appendDummyInput().appendField("初始化");
		this.setPreviousStatement(true);
		this.setNextStatement(true);
		this.setColour(255);
		this.setTooltip("");
		this.setHelpUrl("");
	}
};

定义块的形状。

2.在generators文件夹下新建文件mygenerators.js文件，写入

'use strict';
goog.require('Blockly.JavaScript');

Blockly.JavaScript['init_myblock']=function(block){
	var code='window.alert("initing myblocks...done");\n';
	return code;
};

定义此块将会生成的代码。至此我们自定义了一个名为init_myblock的块。注意不要起init之类的名字，会有冲突。

3.在demo下新建mytest文件夹，进入mytest文件夹后新建index_test.html.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Blockly Demo: Myblocks</title>
  //使用非压缩
  <script src="../../blockly_uncompressed.js"></script>
  <script src="../../blocks/colour.js"></script>
  <script src="../../blocks/lists.js"></script>
  <script src="../../blocks/logic.js"></script>
  <script src="../../blocks/loops.js"></script>
  <script src="../../blocks/math.js"></script>
  <script src="../../blocks/procedures.js"></script>
  <script src="../../blocks/text.js"></script>
  <script src="../../blocks/variables.js"></script>
  <script src="../../blocks/variables_dynamic.js"></script>
  <script src="../../msg/js/en.js"></script>
  
  <script src="../../blocks/myblocks.js"></script> 
  <script src="../../generators/javascript/mygenerators.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; myblocks</h1>
  <p>This is a simple demo of my blocks.</p>

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

  <xml xmlns="https://developers.google.com/blockly/xml" id="toolbox" style="display: none">
	<block type="controls_if"></block>
	<block type="logic_boolean"></block>
	<block type="logic_compare"></block>
	<block type="controls_repeat_ext"></block>
	<block type="math_number">
		<field name="NUM">0</field>
	</block>
	<block type="math_arithmetic"></block>
	<block type="text"></block>
	<block type="text_print"></block>
	<block type="init_myblock"></block>	
  </xml>

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

注意要使用非压缩模式。想使用基础块的话就要挨个导入。54行是注入，也就是显示工作区。

此时打开html即可看到我们自定义的“初始化”块。

二、配置toolbox

toolbox就是左侧的工具箱。所有的块都平铺在这里会显得太乱，可以使用<category name="name"></category>分类。toolbox配置区代码（48行）可改为

	<category name="local blocks">
		<block type="controls_if"></block>
		<block type="logic_boolean"></block>
		<block type="logic_compare"></block>
		<block type="controls_repeat_ext"></block>
		<block type="math_number">
			<field name="NUM">0</field>
		</block>
		<block type="math_arithmetic"></block>
		<block type="text"></block>
		<block type="text_print"></block>
	</category>	
	<category name="my blocks">
		<block type="init_myblock"></block>	
	</category>

效果如图

三、实用按钮

怎么看生成的代码呢？我们在网页上定义2个按钮Show JsvaScript和Run JavaScript。

在<body>中添加

  <p>
	<button onclick="showCode()">Show JsvaScript</button>
	<button onclick="runCode()">Run JavaScript</button>
  </p>

在<body>/<script>中添加

        function showCode(){
            //generate JavaScript code and display.
            Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
            var code=Blockly.JavaScript.workspaceToCode(demoWorkspace);
            <!-- Blockly.python.infinite_loop_trap = null; -->
            <!-- var code=Blockly.python.workspacetocode(demoworkspace); -->
            console.log(code);
        }

        function runCode(){
            //generate JavaScript code and run.
            window.LoopTrap=1000;
            Blockly.JavaScript.INFINITE_LOOP_TRAP='if (--window.LoopTrap==0) throw "Infinite loop.";\n';
            var code=Blockly.JavaScript.workspaceToCode(demoWorkspace);
            Blockly.JavaScript.INFINITE_LOOP_TRAP=null;
            //Blockly.Python.INFINITE_LOOP_TRAP='if (--window.LoopTrap==0) throw "Infinite loop.";\n';
            //var code=Blockly.Python.workspaceToCode(demoWorkspace);
            //Blockly.Python.INFINITE_LOOP_TRAP=null;
        try{
            eval(code);
        }
        catch(e){
            alert(e);
        }
        }

发现没有导入基础块的generator，在<head>中添加

  <script src="../../generators/javascript.js"></script>
  <script src="../../generators/javascript/colour.js"></script>
  <script src="../../generators/javascript/lists.js"></script>
  <script src="../../generators/javascript/logic.js"></script>
  <script src="../../generators/javascript/loops.js"></script>
  <script src="../../generators/javascript/math.js"></script>
  <script src="../../generators/javascript/procedures.js"></script>
  <script src="../../generators/javascript/text.js"></script>
  <script src="../../generators/javascript/variables.js"></script>
  <script src="../../generators/javascript/variables_dynamic.js"></script>

此时再重新打开网页，已实现show和run的功能。打开开发者模式，即可看到show的代码。

番茄V王子

关注

1
点赞
踩
13

收藏

觉得还不错? 一键收藏
1
评论
blockly自定义块简单实现

blockly自定义块支持使用json和JS，本文使用JS。自定义块需要两个部分，blocks和generators。要看效果可以新建自己的index.html。一、自定义块的步骤1.在blocks/文件夹下新建文件myblocks.js文件，写入'use strict';goog.require('Blockly.Blocks');goog.require('Blo...
复制链接

扫一扫

专栏目录