【导语】:Blockly 是 Google 开源的基于 web 的可视化程序编辑器,用户可以将一些定义好的图形块拼接在一起,用来构建应用程序。
简介
Blockly 是一个向 Web 和移动应用程序添加可视化代码编辑器的库,块之间使用互锁的图形块来表示代码,如变量,逻辑表达式,循环等。该编辑器将代码表示为一个个的图形块,通过图形块之间的连接保证语法的正确性,同时支持自定义块以连接到应用程序中。
从用户的角度看,Blockly 是一种直观。可视化的代码构建方式,对于开发人员来说,Blockly 是一种现成的 UI,用于创建一种可视化语言,该语言可以生成语法正确的用户代码。目前支持JS、Python、PHP、Lua、Dart。
它是一个纯JavaScript 库,不依赖于服务端,与主流浏览器兼容,包括Chrome、Firefox、Safari、Opera和IE(IE11),并且支持定制和扩展。
Blockly 具有以下特点和优势:
解决 Blockly Games 的迷宫问题的例子:
项目地址:
https://github.com/google/blockly
简单使用
下载安装方法很简单,使用npm直接安装即可:
npm?install?blockly?
Blockly工具箱
工具箱是用户可以从中创建新块的侧边菜单,使用XML或JSON指定工具箱的结构,并在注入页面后被传递给Blockly。
XML格式:
<xml?id="toolbox"?style="display:?none">??<category?name="Logic"?colour="210">...</category>??<category?name="Loops"?colour="120">...</category>??<category?name="Math"?colour="230">...</category>??<category?name="Colour"?colour="20">...</category>??<category?name="Variables"?colour="330"?custom="VARIABLE"></category>??<category?name="Functions"?colour="290"?custom="PROCEDURE"></category>??</xml>?
JSON格式:
{??"contents":?[??{??"kind":?"category",??"name":?"Logic",??"colour":?"210"??},??{??"kind":?"category",??"name":?"Loops",??"colour":?"120"??}??]??}?
效果如下:
创建固定大小的Blockly工作区
引入Blockly库和用户语言集:
<script?src="blockly_compressed.js"></script>??<script?src="blocks_compressed.js"></script>??<script?src="msg/js/en.js"></script>?
添加空白div元素:
<div?id="blocklyDiv"?style="height:?480px;?width:?600px;"></div>?
添加工具箱
<xml?id="toolbox"?style="display:?none">??<block?type="controls_if"></block>??<block?type="controls_repeat_ext"></block>??<block?type="logic_compare"></block>??<block?type="math_number"></block>??<block?type="math_arithmetic"></block>??<block?type="text"></block>??<block?type="text_print"></block>??</xml>?
执行以下代码将Blockly注入到div中
<script>??var?workspace?=?Blockly.inject('blocklyDiv',??{toolbox:?document.getElementById('toolbox')});??</script>?
效果如下:
代码生成器:
确认所需的语言生成器,引入不同的库文件:
<script?src="javascript_compressed.js"></script>??<script?src="python_compressed.js"></script>??<script?src="php_compressed.js"></script>??<script?src="lua_compressed.js"></script>??<script?src="dart_compressed.js"></script>?
语言生成器库要紧接着blockly_compressed.js引入:
<script?src="blockly_compressed.js"></script>??<script?src="javascript_compressed.js"></script>?
导出代码:
var?code?=?Blockly.JavaScript.workspaceToCode(workspace);?
实时生成。生成代码的效率非常高,频繁调用不会有什么大问题,可以通过向Blockly的change事件添加监听器来实时生成和显示代码:
function?myUpdateFunction(event)?{??var?code?=?Blockly.JavaScript.workspaceToCode(workspace);??document.getElementById('textarea').value?=?code;??}??workspace.addChangeListener(myUpdateFunction);?
效果如下:
创建自定义块
Blockly拥有大量预定义的块,从数学函数导循环结构等应有尽有。但是有时候我们仍然需要自定义块以符合我们个性化的需求。在通常情况下,自定义块最快的方法就是找到一个最符合需求并且已经存在的块,在已有基础上对其进行修改。
小结
以上只是对 Blockly 基础和核心的功能做简要介绍,更详细的文档请参考官方网站。
https://developers.google.com/blockly/
领取专属 10元无门槛券
私享最新 技术干货