详细内容
个人开发人员工具 和 本文章的演示页面 内容见如下链接
详情请见:https://www.daobanmojie.com/515.html
固定工作区demo
准备文件
首先前往 Blockly Developer Tools配置自己的workspace
和Toolbox
不会科学上网的,可以使用我在我的服务器搭建的 Blockly Developer Tools
制作工作区中进行配置,+
添加自己需要的菜单,并对工作区进行配置,最后导出所有文件。
下载的三个文件分别为workspace.xml
workspace.js
toolbox.xml
workspace.xml
<xml xmlns="https://developers.google.com/blockly/xml" id="workspaceBlocks" style="display: none"></xml>
workspace.js
/* TODO: Change toolbox XML ID if necessary. Can export toolbox XML from Workspace Factory. */
var toolbox = document.getElementById("toolbox");
var options = {
toolbox : toolbox,
collapse : true,
comments : true,
disable : true,
maxBlocks : Infinity,
trashcan : true,
horizontalLayout : false,
toolboxPosition : 'start',
css : true,
media : 'http://blockly.daobanmojie.com/media/',
rtl : false,
scrollbars : true,
sounds : true,
oneBasedIndex : true,
grid : {
spacing : 20,
length : 1,
colour : '#888',
snap : false
},
zoom : {
controls : true,
wheel : true,
startScale : 1,
maxScale : 5,
minScale : 0.3,
scaleSpeed : 1.2
}
};
/* Inject your workspace */
var workspace = Blockly.inject(/* TODO: Add ID of div to inject Blockly into */, options);
/* Load Workspace Blocks from XML to workspace. Remove all code below if no blocks to load */
/* TODO: Change workspace blocks XML ID if necessary. Can export workspace blocks XML from Workspace Factory. */
var workspaceBlocks = document.getElementById("workspaceBlocks");
/* Load blocks to workspace. */
Blockly.Xml.domToWorkspace(workspaceBlocks, workspace);
toolbox.xml
<xml xmlns="https://developers.google.com/blockly/xml" id="toolbox" style="display: none">
<category name="基本" colour="#5b80a5">
<block type="controls_if"></block>
<block type="logic_boolean">
<field name="BOOL">TRUE</field>
</block>
</category>
<category name="测试" colour="#5ba55b">
<block type="controls_repeat_ext">
<value name="TIMES">
<shadow type="math_number">
<field name="NUM">10</field>
</shadow>
</value>
</block>
</category>
</xml>
创建页面
index.html
新建一个index.html
页面,如下:
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<title>盗版摩羯 Blockly Simple Demo</title>
</head>
<body>
</body>
</html>
引入 Blockly 脚本和核心块集
引入 Blockly 脚本和核心块集,以及用户语言消息。可以下载到本地,也可以直接引用网络上的。
方法一
使用本地的文件。
<head>
<meta charset="UTF-8">
<title>盗版摩羯 Blockly Simple Demo</title>
<script src="../../blockly_compressed.js"></script>
<script src="../../blocks_compressed.js"></script>
<script src="../../msg/js/zh-hans.js"></script>
</head>
方法二
使用unpkg上的blockly文件。
<head>
<meta charset="UTF-8">
<title>盗版摩羯 Blockly Simple Demo</title>
<script src="https://unpkg.com/blockly/blockly_compressed.js"></script>
<script src="https://unpkg.com/blockly/blocks_compressed.js"></script>
<script src="https://unpkg.com/blockly/msg/zh-hans.js"></script>
</head>
方法三
使用其他网络上部署的文件,这里是我自己的。
<head>
<meta charset="UTF-8">
<title>盗版摩羯 Blockly Simple Demo</title>
<script src="http://blockly.daobanmojie.com/blockly_compressed.js"></script>
<script src="http://blockly.daobanmojie.com/blocks_compressed.js"></script>
<script src="http://blockly.daobanmojie.com/msg/js/zh-hans.js"></script>
</head>
引用文件
接下来,开始把之前下载的三个文件也引入到index.html
中。
workspace.xml
打开workspace.xml
,复制代码添加index.html
文件的<body></body>
标签中。
<body>
<xml xmlns="https://developers.google.com/blockly/xml" id="workspaceBlocks" style="display: none"></xml>
</body>
如果想在工作区有默认的显示,则可以在此<xml>
中进行添加,如:
<xml xmlns="https://developers.google.com/blockly/xml" id="workspaceBlocks" style="display: none">
<block type="controls_if" id="1" x="12" y="13">
<value name="DO0">
<block type="controls_if" id="2"></block>
</value>
</block>
</xml>
blocklyDiv
打开index.html
,在页面正文的某处添加一个空 div 并设置其大小:
<body>
<xml xmlns="https://developers.google.com/blockly/xml" id="workspaceBlocks" style="display: none"></xml>
<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
</body>
toolbox.xml
打开toolbox.xml
,复制我们之前配置的工具箱菜单,并粘贴到index.html
中。
<body>
<xml xmlns="https://developers.google.com/blockly/xml" id="workspaceBlocks" style="display: none"></xml>
<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
<xml xmlns="https://developers.google.com/blockly/xml" id="toolbox" style="display: none">
<category name="基本" colour="#5b80a5">
<block type="controls_if"></block>
<block type="logic_boolean">
<field name="BOOL">TRUE</field>
</block>
</category>
<category name="测试" colour="#5ba55b">
<block type="controls_repeat_ext">
<value name="TIMES">
<shadow type="math_number">
<field name="NUM">10</field>
</shadow>
</value>
</block>
</category>
</xml>
</body>
workspace.js
打开workspace.js
,并在Blockly.inject();
添加创建的div
的id
。
var workspace = Blockly.inject("blocklyDiv", options);
如果使用的是本地资源,则修改如下代码
media : '/media/',
然后引入到index.html
的末尾。
<body>
<xml xmlns="https://developers.google.com/blockly/xml" id="workspaceBlocks" style="display: none"></xml>
<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
<xml xmlns="https://developers.google.com/blockly/xml" id="toolbox" style="display: none">
<category name="基本" colour="#5b80a5">
<block type="controls_if"></block>
<block type="logic_boolean">
<field name="BOOL">TRUE</field>
</block>
</category>
<category name="测试" colour="#5ba55b">
<block type="controls_repeat_ext">
<value name="TIMES">
<shadow type="math_number">
<field name="NUM">10</field>
</shadow>
</value>
</block>
</category>
</xml>
<script src="workspace.js"></script>
</body>
代码生成器
最核心的内容就是代码生成了
生成器类应该在blockly_compressed.js. 例如,这是包含的 JavaScript 生成器:
<script src="blockly_compressed.js"></script>
<script src="javascript_compressed.js"></script>
用户的块可以通过以下调用随时从您的应用程序导出到代码中:
var code = Blockly.JavaScript.workspaceToCode(workspace);
替换JavaScript与Python,PHP,Lua,或Dart在这两个先前行切换所产生的语言。
这里呢我在index.html
中写了一个简单的函数,在控制台进行打印。
<script src="../../javascript_compressed.js"></script>
<script>
function translate() {
var code = Blockly.JavaScript.workspaceToCode(workspace);
console.log(code);
}
</script>
到这里配置就结束了,配置到服务器,然后浏览器打开即可。
演示页面 http://blockly.daobanmojie.com/demo/simple/
完整代码
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<title>盗版摩羯 Blockly Simple Demo</title>
<script src="../../blockly_compressed.js"></script>
<script src="../../blocks_compressed.js"></script>
<script src="../../msg/js/zh-hans.js"></script>
</head>
<body>
<h2>控制台输入 translate() 查看代码生成器内容!</h2>
<xml xmlns="https://developers.google.com/blockly/xml" id="workspaceBlocks" style="display: none">
<block type="controls_if" id="1" x="12" y="13">
<value name="DO0">
<block type="controls_if" id="2"></block>
</value>
</block>
</xml>
<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
<xml xmlns="https://developers.google.com/blockly/xml" id="toolbox" style="display: none">
<category name="基本" colour="#5b80a5">
<block type="controls_if"></block>
<block type="logic_boolean">
<field name="BOOL">TRUE</field>
</block>
</category>
<category name="测试" colour="#5ba55b">
<block type="controls_repeat_ext">
<value name="TIMES">
<shadow type="math_number">
<field name="NUM">10</field>
</shadow>
</value>
</block>
</category>
</xml>
<script src="workspace.js"></script>
<script src="../../javascript_compressed.js"></script>
<script>
function translate() {
var code = Blockly.JavaScript.workspaceToCode(workspace);
console.log(code);
}
</script>
</body>
</html>
活动工作区demo
演示页面 http://blockly.daobanmojie.com/demo/overlay/
实际测试中,把固定的<div>
更改为如下,即可实现。
<div id="blocklyDiv" style="height: 100%; width: 100%;"></div>
以下是参考官网给的例程,对于固定工作区而言需要修改的地方
index.html
<head>
<style>
html,
body {
height: 100%;
margin: 0;
}
</style>
</head>
<body>
<div id="blocklyArea" style="height: 100%;"></div>
<div id="blocklyDiv" style="position: absolute"></div>
</body>
/* TODO: Change toolbox XML ID if necessary. Can export toolbox XML from Workspace Factory. */
var toolbox = document.getElementById("toolbox");
var options = {
toolbox: toolbox,
collapse: true,
comments: true,
disable: true,
maxBlocks: Infinity,
trashcan: true,
horizontalLayout: false,
toolboxPosition: 'start',
css: true,
media: '/media/',
rtl: false,
scrollbars: true,
sounds: true,
oneBasedIndex: true
};
/* 固定工作区
// Inject your workspace
var workspace = Blockly.inject(blocklyDiv, options);
// Load Workspace Blocks from XML to workspace. Remove all code below if no blocks to load
// TODO: Change workspace blocks XML ID if necessary. Can export workspace blocks XML from Workspace Factory.
var workspaceBlocks = document.getElementById("workspaceBlocks");
// Load blocks to workspace.
Blockly.Xml.domToWorkspace(workspaceBlocks, workspace);
*/
// 自动工作区大小
var blocklyArea = document.getElementById('blocklyArea');
var blocklyDiv = document.getElementById('blocklyDiv');
var workspace = Blockly.inject(blocklyDiv, options);
var onresize = function (e) {
// 计算区块区域的绝对坐标和尺寸。
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);