
Google Blockly 是一款基于Web的、开源的、可视化程序编辑器。你可以通过拖拽块
的形式快速构建程序,而这些所拖拽的每个块
就是组成程序的基本单元。可视化编程完成,Blockly 直接支持 JavaScript、Python、PHP、Lua、Dart 语言源码的导出。此外,还可以将 Blockly 编辑器快速集成到Web、Android或iOS环境中。
因近期参与一个机器人项目,可视化编程是项目需求之一。故以Web版本(HTML 和 JavaScrip)为例,整理一下 Blockly 的使用方法及各功能点。
- Blockly 介绍
- 1.1 构建Blockly应用
- 1.2 Blockly与其它方案的比较
- 使用 Blockly
- 2.1 概述
- 2.2 获取源码
- 2.3 注入 Blockly
- 2.4 配置
- 2.5 代码生成
- 2.6 “块”的导入、导出
- 2.7 云存储
1. Blockly 介绍
Blockly 是一个向Web或Andorid/iOS应用添加可视化代码编辑器的库,Blockly使用相互联锁的、图形化的块来表示代码中的概念,如:如变量、逻辑表达式、循环等。这样,用户就可以应用编程原理,而不必担心具体的语法、或命令行。
1.1 构建Blockly应用
对于用户来说,Blockly 只是用更直观的可视化的方式来生成代码。而对于开发都而言,Blockly只是一个文本框,其包含了语法正确的、用户生成的代码。
Blockly可以将“块”导出为代码,其支持以下主流语言:
- JavaScript
- Python
- PHP
- Lua
- Dart
构建一个Blockly应用一般包括以下步骤:
- 集成Blockly编辑器 - 最简单的Blockly编辑器包含了一个“工具箱”来存储的块(block)类型,和一个用于安装块的“工作区”。详细集成方法请参考使用 Blockly,或官方文档Web和Android
- 创建应用块 - 集成Blockly后,就需要创建一些用户代码块,并将其添加到Blockly“工具箱”。创建自定义块参考官方文档Create Custom Blocks Overview
- 构建应用的其余部分 - Blockly只是解决一代码生成的部分,而应用的核心是如果使用代码,这部分还需要开发者自行实现
1.2 Blockly与其它方案的比较
Blockly 正在被越来越多可视化编程环境所使用。使用Blockly做为可视化编程方案具体有以下几点优势:
- 代码可导出 - 用户可基于“块”提取出通用编程语言,并可平滑过渡到基于文本的编程。
- 开源 - Blockly 开放所有源码,你可以复制、修改、并将其应用到你的网站或Andorid等应用中
- 可扩展 - 你可以按需要调整 Blockly,包括根据你的API添加新自定义“块”、移不需要的块和功能等。
- 高可用 - Blockly 不是玩具,你可以用它来实现复杂的编程任务
- 国际化 - Blockly 已被翻译40+种语言
尽管有以上优势,但 Blockly 不可能成为所有应用的解决方案。以下是一些其它可视化编程方案,可按自己需要选用:
- Scratch Blocks: MIT设计和实现的一个Blockly代码库,Scratch Blocks提供了一个简化的编程模型,非常适合于初学者
- Droplet:支持Pencil Code的图形化编程编辑器,它的显著特点是能够从代码转换成块。
- Snap:一个从无到有的图形化编程语言,它不是一个库,而是一个集成执行环境的完整应用
2. 使用 Blockly
接下来,我们基于HTML
和JavaScript
,来介绍将Blockly做为代码编辑器集成到Web应用中的过程。除Web应用外,Blockly还可以集成到Android或iOS应用中,详细请参考官方文档:
- Get Started-Android
- Get Started-iOS
2.1 概述
Blockly 被设计的可以很容易地安装到你的Web应用中。用户可以拖动“块”,而Blockly通过“块”生成代码,而应用无需为生成代码做任何事情。对应用来说 Blockly 仅是一个用户指定类型语言(JavaScript, Python, PHP, Lua, Dart 或其它)的文本输入框。
Blockly 是一个完全客户端应用,它无需服务端的任何支持(除非你要使用云存储等服务端功能),且没有第三方的依赖(除非你想重新编译内核),一切都是开源的。
2.2 获取源码
Blockly 源码托管在 GitHub,可以通过 GitHub 下载或在线查看源码:
- 下载Zip包
- 下载Tar包
- GitHub在线查看
下载源码并解压后,可以在浏览器打开demos/fixed/index.html
文件,验证 Blockly 的块是否可以拖动等。
2.3 注入 Blockly
安装 Blockly 并验证其可用后,就可以引入 Blockly。如,将 Blockly 在Web页面的一个固定尺寸的div
:
- 固定尺寸的 Blockly
更高级的用法可以让 Blockly 调整大小,以填满页面:
- 可调尺寸的 Blockly
2.4 配置
上面的示例的Blockly.inject
行中,第二个参数是一个键/值对字典。其用于配置Blockly,可用的配置项有:
-
collapse
- boolean。允许“块”折叠或展开。如果工具箱有类别,默认为true
;其它情况为false
-
comments
- boolean。允许“块”有注释。如果工具箱有类别,默认为true
;其它情况为false
-
css
- boolean。如果设置false
,则不注入 CSS;默认为true
-
disable
- boolean。使“块”不可用。如果工具箱有类别,默认为true
;其它情况为false
-
grid
- object。配置一个网格,使块可以捕获到。见Grid -
horizontalLayout
- boolean。设置true
则工具箱使用水平布局;false
则使用垂直布局。默认为false
-
maxBlocks
- number。最大可创建的“块”数量。默认为Infinity
-
media
- string。Blockly 媒体文件目录路径。默认为"https://blockly-demo.appspot.com/static/media/"
-
oneBasedIndex
- boolean。设置为true
则字符串操作索引会从1
开始;false
则从0
开始。默认为true
-
readOnly
- boolean。设置为true
,则禁止用户编辑。影响“工具箱”和“垃圾桶”。默认为false
-
rtl
- boolean。设置为true
,则镜像化编辑器。默认为false
。见RTL Demo -
scrollbars
- boolean。设置工作区是否可滚动。如果工具箱有类别,默认为true
;其它情况为false
-
sounds
- boolean。设置为false
,则点击或删除时不会播放声音。默认为true
-
toolbox
- XML节点或string。用户可用“分类”和“块”的结构树。 -
toolboxPosition
- string。设置为start
,则工具箱在上部(水平显示时)或左则(垂直显示时)或右则(垂直LTR显示时)。设置为end
,则在相对僧。默认为start
-
trashcan
- boolean。显示或隐藏“垃圾桶”。如果工具箱有类别,默认为true
;其它情况为false
-
zoom
- object。工作区缩放配置。见Zoom
在以上配置中,最重要的选项是toolbox
。它是一个XML节点树,用于指定工具箱中有哪些可用的“块”、块如何分布、及是否有类别。
- 更多信息参考工具箱配置
另外,除 Blockly 的默认“块”外,定义块需要通过调用你Web应用的API来构建。
- 更多信息参考创建自定义块
2.5 代码生成
Blockly 是编程语言,也就不能“运行” Blockly 程序。但是你可以将 Blockly 转为用户所需要的JavaScript、Python、PHP、Dart或其它语言
- 更多信息参考代码生成
2.6 “块”的导入、导出
如果你需要将“块”导出,以在其它应用中使用或在以后还原。可以调用以下XML:
var xml = Blockly.Xml.workspaceToDom(workspace); var xml_text = Blockly.Xml.domToText(xml);
调用后,会生成一个最小化的包含用户“块”的XML。如果想使导出的XML更可读,那么可以使用Blockly.Xml.domToPrettyText
来代替上面方法。
恢复己导出的XML,像下面这样即可:
var xml = Blockly.Xml.textToDom(xml_text); Blockly.Xml.domToWorkspace(xml, workspace);
2.7 云存储
Blockly 带有一个可选的云存储功能。它允许用户保存、加载、共享和发布程序。如果你的项目是在云端托管,那么你可以利用此服务的优势。
- 更多信息参考云存储
===============================================
Blockly 的配置
本文基于Web Blockly,整理一下可视化编程工具-Blockly 的常用配置,包括:工作区配置、添加自定义块、配置工具箱、配置代码生成器等。
- 固定尺寸工作区
- 可调尺寸工作区
- 添加自定义块(
Block
) - 工具箱(
Toolbox
)配置 - 代码生成器
- 网格(
Grid
) - 缩放(
Zoom
) - 事件
- 云存储
1. 固定尺寸工作区
把 Blockly 放到网页上最简单的方法是将其注入到一个空div
中。
1.1 引入 Blockly 脚本
首先,引入 Blockly 脚本及核心“块”:
注意:实际路径可能与上面不同,请按 Blockly 的实际位置调整上面路径
1.2 引入语言文件
引入包含用户语言的消息定义(本例中使用了英语):
1.3 确定引入位置
在页面创建一个空div
元素,并设置其尺寸:
1.4 添加工具栏
在页面任意位置定义好“工具栏”结构:
1.5 初始化
最后,在页面底部(之前)创建调用脚本,完成 Blockly 的初始化:
workspace
变量当前并不会使用,但当需要保存“块”或生成代码时,它会变得非常重要。如果有多个 Blockly 实例注入到同一个页面时,应保存其返回的工作区保存在不同的变更中。
2. 可调尺寸工作区
一个好的Web应用将调整 Blockly 的大小以填充屏幕的可用空间,而不是将其固定成一个尺寸。以下演示了一种创建可调尺寸的 Blockly 的方法,这本示例中只需简单的三步,就可以创建一个非固定尺寸的工作区:
2.1 定义区域
使用HTML的table
元素或div
及CSS,创建一个空区域,并确保该区域有一个唯一的ID(本例中为blocklyArea
)
一个在线示例,在页底部使用table
进行定义
2.2 注入
与创建固定尺寸工作区一样引入 Blockly,添加脚本、blocklyDiv
元素、工具栏、及初始化脚本。
2.3 定位
最后一步是将blocklyDiv
元素定位到blocklyArea
元素上。这样,就需要移除blocklyDiv
元素的height
、width
样式,并添加绝对定位:
然后用一个同样位于
blocklyDiv
之上的blocklyArea
取代注入脚本:
3. 添加自定义块(
Block
)虽然 Blockly 已经定义了大量的标准块,但大多数应用仍然需要定义和实现一些自己业务相关的“块”
“块”有三个组件构成:
-
块(
- 定义块的外观和行为,包括文本、颜色、字段和连接Block
)定义对象 -
工具箱(
- 工具箱XML中对块类型的引用,这样用户才能将其添加到工作区中Toolbox
引用 -
生成器函数
- 用于生成块的代码字符串。该函数总是使用JavaScript编写,虽然目标语言可能不是JavaScrpit,基至运行环境也可能不是Web
3.1 块定义
Blockly 通过页面中脚本文件加载“块”,在 下面定义是字符串定义形式,两种方式是等价的: 两种定义方式,都会生成如下工具箱: 工具箱中的模块可以类别进行组织。以下示例中,包含了 完成定义后,其效果如下: “分类”表示会改变 Blockly 的UI,以支持更大的应用。而“滚动条”的出现,就提供了一个无限大的工作空间。其它的,如:“垃圾桶”、“上下文菜单”等,都可以通过配置选项来设置。 定义分类时,可以通过一个 设置颜色后,工具栏效果如下: 以下有两个分类 开发者还可以使用 类别可以嵌套在其它类别中。如下所示,有两个顶级类别 XML可以包含自定义块或块分组。现在有以下4个块: 以下工具栏中包括了上面4个块: 这些定制块或组的XML与Blockly的XML存储格式相同。因此,为此类块构造XML的最简单方法是使用 “阴影块”是执行几个函数的占位符块,它们具有以下特征: 阴影块不能直接用 添加一个 默认情况下,两个相邻块之间的分隔间隔为24像素。可以通过修改 通过调整块之间间隙,就可以在工具箱中创建逻辑块组: 就像“块”一样,你也可以将一个按钮或标签放在工具栏的任何位置: 还可以对按钮和标签使用CSS样式。在上面示例中,第一个 按钮需要回调一个函数,但标签不用。设置按钮点击时的回调函数: 工具箱中的“块”,可以在XML中通过 禁用块可用于限制用户的选择。这可以用于用户完成某些成就后解锁块的场景: 应用可以在任何时候通过调用以下函数来修改工具箱: 在初始配置下, 别外,更新工具栏可能会导致一些较小的UI重置: 大多数 Blockly 应用都需要将用户程序转换为JavaScript、Python、PHP、Lua、Dart或其它语言,这一转换过程是由 Blockly 客户端完成的。 首先,引入所需生成语言的生成器。Blockly 中包含了以下生成器: 生成器类需要在 应用调用时,用户块可以随时从应用中导出到代码: 将以上代码中的 生成的操作非常快,所以频繁调用生成函数也不会有问题。这样就可以通过添加 Blockly 事件监听来实时生成代码: Blockly 的主工作区可以有一个网格。而网格可以对块进行分隔,从而实现更整洁的布局。当工作区较大时,这会非常有用。 注入 Blockly 时,可以在其配置选项中启用网格: 网格最重要的配置项就是 以下为将 Blockly 的主工作区大小是可调的,其大小可以由用户动态控制,或由开发者设置为静态的。 设置为 设置为 初始放大基数。对于多层应用来说, 最大可放大倍数,默认为 最小可缩小倍数,默认为 每次放大或缩小时,维放速度比。即: 工作区上的每个更改都会触发事件。这些事件完全描述了每次更改前后的状态。 工作区对象( 在以下示例中,会检测用户创建的第一条注释,然后发出警报,并停止监听,从而不进一步触发警报: 此外,Blockly 还提供了另一种监听事件流的方法,可以在每个“块”中定义一个 所有事件都具有以下共同属性: 你的应用是托管在云端的,那么你可以使用 Blockly 的云存储功能,并利用这一服务的优势来保存、加载、分享、或发布你的程序。 首先,需要将 Blockly 发布到应用引擎上: 上传 Blockly 后,就可以在浏览器中输入步骤2中创建的URL。然后就能到看到Demo列表,包括云存储Demo。 在云存储Demo的demos/storage/index.html文件中有以下特点。 首先,有一个加载云存储API的脚本: 请注意,该脚本假设只有页面上只有一个 Blockly 工作区。还有下面这些消息定义,应该根据你需要修改这些定义: 将这些消息解析成其它语言的示例,可以参考 Blockly Games 中的json目录 保存当前块调用 在页面加载时重新保存,仅需在 Blockly 注入页面,通过根据URL中的Hash调用 从本地存储中恢复块,只需要在 Blockly 注入后超时调用 在用户离开时自动备份到本地存储,可调用 示例 一个云存储在线示例blocks/
目录下包含了几个标准块示例。如果需要创建一个新的块,就需要创建个包含块定义的脚本文件,并将其添加到引用页的
4.2 类别
'Control'
和'Logic'
两个分类:
colour
属性来指定该分类的颜色。颜色使用0~360
之间的数字表示:
4.3 动态类别
'Variables'
和'Functions'
用于指定形为,分类里面并没有内容,但定义分类时添加了'custom'
属性,值可以是'VARIABLE'
或'PROCEDURE'
。这些分类,将使用适合的“块”自动填充:custom
属性来创建动态填充弹出类别。例如,要创建一个自定义的弹出颜色块:
/**
* Construct the blocks required by the flyout for the colours category.
* @param {!Blockly.Workspace} workspace The workspace this flyout is for.
* @return {!Array.} Array of XML block elements.
*/
myApplication.coloursFlyoutCallback = function(workspace) {
// Returns an array of hex colours, e.g. ['#4286f4', '#ef0447']
var colourList = myApplication.getPalette();
var xmlList = [];
if (Blockly.Blocks['colour_picker']) {
for (var i = 0; i < colourList.length; i++) {
var blockText = '
myWorkspace.registerToolboxCategoryCallback(
'COLOUR_PALETTE', myApplication.coloursFlyoutCallback);
4.4 类别树
'Core'
和'Custom'
,每个类别中又包含了两个子类别:
4.5 块分组
logic_boolean
块: math_number
块,用于修改时显示42而不是0: controls_for
块,其中包括了3个math_number
块: math_arithmetic
块,其中包括了两个math_number
“阴影块”:
Code application
来构建块,然后切换到XML
选项卡并复制结果。
Code application
构造,但可以通过替换普通块的XML中的
和为
和来构造。
4.6 分隔器
标签到任意两个分类之间,将会创建一个“分隔器”。sep
标签的gap
属性来调整距离:
4.7 按钮与标签
label
标签使用了自定义样式,而button
则使用了默认样式。yourWorkspace.registerButtonCallback(yourCallbackKey, yourFunction).
4.8 禁用
disabled
属性将其禁用:
4.9 Toolbox的修改
workspace.updateToolbox(newTree);
newTree
可能是一个节点树或字符串。唯一的限制就是不能修改模式,也就是说在初始工具箱中定义的类别,那么新工具箱也必须有;同样的,初始工具箱中没有的类别,在新工具箱中也不能有。
5. 代码生成器
5.1 生成代码
javascript_compressed.js
python_compressed.js
php_compressed.js
lua_compressed.js
dart_compressed.js
blockly_compressed.js
之后引入。如:
var code = Blockly.JavaScript.workspaceToCode(workspace);
JavaScript
替换为Python
、PHP
、Lua
、或Dart
就可以生成相应的代码。5.2 实时生成
function myUpdateFunction(event) {
var code = Blockly.JavaScript.workspaceToCode(workspace);
document.getElementById('textarea').value = code;
}
workspace.addChangeListener(myUpdateFunction);
6. 网格(
Grid
)6.1 使用网格
var workspace = Blockly.inject('blocklyDiv',
{toolbox: document.getElementById('toolbox'),
grid:
{spacing: 20,
length: 3,
colour: '#ccc',
snap: true},
trashcan: true});
6.2 网格配置参数
Spacing
spacing
,它定义了网格中点的距离。其默认值是0
,其结果是不会有网格。以下演示了分别设置为10、20、40时的效果:Length
length
是定义网格端点形状的数字。长度为0的结果是一个看不见的网格,长度为1(默认值)会是点,一个更长的长度会导致交叉,长度等于或大于spacing
时将没有间隔。下面是将length
分别设置为1、5和20的示例:Colour
colour
属性定义了网格端点的颜色,可以使用任何与CSS兼容的格式,如:#f00
、#ff0000
或rgb(255, 0, 0)
,其默认值是#888
。colour
分别设置为#000
、#ccc
和#f00
的效果:Snap
snap
属性是一个布尔值,用于设置当放置在工作空间时块是否应该锁定到最近的网格点。其默认值为false
7. 缩放(
Zoom
)7.1 使用缩放
zoom
是 Blocly 的初始化选项之一:var workspace = Blockly.inject('blocklyDiv',
{toolbox: document.getElementById('toolbox'),
zoom:
{controls: true,
wheel: true,
startScale: 1.0,
maxScale: 3,
minScale: 0.3,
scaleSpeed: 1.2},
trashcan: true});
7.2 缩放配置参数
controls
true
时,会显示zoom-centre、zoom-in、and zoom-out三个按钮,默认为false
。wheel
true
时允许鼠标滚轮缩放,默认为false
startScale
startScale
会在第一层设置一个高级值,这样在子层就可以根据这个值进行更复杂的缩放。默认为1.0
maxScale
3
minScale
0.3
scaleSpeed
scale = scaleSpeed ^ steps
。注意,缩小时使用减,而放大时使用加。默认为1.2
8. 事件
8.1 事件监听
workspace
)中有addChangeListener
和removeChangeListener
两个方法,可用于监听事件流。function onFirstComment(event) {
if (event.type == Blockly.Events.CHANGE &&
event.element == 'comment' &&
!event.oldValue && event.newValue) {
alert('Congratulations on creating your first comment!')
workspace.removeChangeListener(onFirstComment);
}
}
workspace.addChangeListener(onFirstComment);
'onchange'
函数,该函数会在块发生变化时被调用。8.2 事件类型
type
- string。Blockly.Events.CREATE
、Blockly.Events.DELETE
、Blockly.Events.CHANGE
、Blockly.Events.MOVE
、Blockly.Events.UI
之一workspaceId
- string。工作区UUID。工作区可以通过Blockly.Workspace.getById(event.workspaceId)
找到blockId
- string。块的UUID。块可以通过workspace.getBlockById(event.blockId)
找到group
- string。UUID 分组。有些事件是不可分割的组中的一部分。例如,在堆栈中插入语句Blockly.Events.CREATE
Create
事件,其有两个附加属性:
xml
- object。定义新块及任何连接子块的XMLids
- array。包含新块及任何连接子块Id的数组Blockly.Events.DELETE
Delete
事件,其有两个附加属性:
oldXml
- object。所删除块及任何连接子块的XMLids
- array。包含所删除块及任何连接子块Id的数组Blockly.Events.CHANGE
Change
事件,其有4个附加属性:
element
- string。'field'
、'comment'
、'collapsed'
、'disabled'
、'inline'
、'mutate'
之一name
- string。所更改字段的名称oldValue
- value。原始值newValue
- value。修改后的值Blockly.Events.MOVE
Move
事件,其有以下6个附加属性:
oldParentId
- string。其旧父块的UUID,当为顶级块时为Undefined
oldInputName
- string。旧输入值,当为顶级块时为Undefined
oldCoordinate
- object。当为顶级块时,则为X和Y坐标;否则为Undefined
newParentId
- string。其新父块的UUID,当为顶级块时为Undefined
newInputName
- string。新输入值,当为顶级块时为Undefined
newCoordinate
- object。当为顶级块时,则为X和Y坐标;否则为Undefined
Blockly.Events.UI
UI
事件,其有以下3个附加属性:
element
- string。'selected'
、'category'
、'click'
、'commentOpen'
、'mutatorOpen'
、'warningOpen'
值之一oldValue
- value。原始值newValue
- value。修改后的值9. 云存储
9.1 设置应用引擎
appengine/app.yaml
,并将blockly-demo
中的应用Id修改为上一步所创建的Idappengine/static/
:
demos/
msg/
media/
*_compressed.js
blockly_uncompressed.js
,则同样需要将其复制到appengine/static/
。复制core
到appengine/static/
,并复制closure-library/
到上级目录appengine/
blocks
、generators
和tests
几个目录到指定位置appengine
,然后点击“Deploy”按钮。如果习惯使用命令行,那么执行:appcfg.py --oauth2 update appengine/
9.2 云端通讯
BlocklyStorage.HTTPREQUEST_ERROR = 'There was a problem with the request.\n';
BlocklyStorage.LINK_ALERT = 'Share your blocks with this link:\n\n%1';
BlocklyStorage.HASH_ERROR = 'Sorry, "%1" doesn\'t correspond with any saved Blockly file.';
BlocklyStorage.XML_ERROR = 'Could not load your saved file.\n' +
'Perhaps it was created with a different version of Blockly?';
BlocklyStorage.link()
即可:BlocklyStorage.retrieveXml
:if ('BlocklyStorage' in window && window.location.hash.length > 1) {
BlocklyStorage.retrieveXml(window.location.hash.substring(1));
}
9.3 本地存储
storage.js
API 还有浏览器本地存储能力。这可以用于替代云存储,或二者结合使用。BlocklyStorage.restoreBlocks
即可:window.setTimeout(BlocklyStorage.restoreBlocks, 0);
BlocklyStorage.backupOnUnload
实现,且其可以通过监听页面的unload
事件来自动调用:BlocklyStorage.backupOnUnload();