天天看點
傳回

blockly自定義塊簡單實作

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/" target="_blank" rel="external nofollow" >Blockly</a> &gt;
    <a href="../index.html" target="_blank" rel="external nofollow" >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>

效果如圖

blockly自定義塊簡單實作

三、實用按鈕

怎麼看生成的代碼呢？我們在網頁上定義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的代碼。

blockly javascript
上一篇: blockly和Java互動_blockly 基礎學習（一）
下一篇: Blockly - 來自Google的可視化程式設計工具

繼續閱讀