Blockly学习之文档阅读笔记

文档阅读来源——谷歌官网介绍：

https://developers.google.com/blockly/guides/overview

概述

一个用于Web、Android、iOS的可视化代码编辑器库。

使用了相互关联的积木来表示表达代码中变量、逻辑表达式、循环等。让用户能够了解编程，而不用面对命令行上让人恐惧和枯燥的代码和语法。

在用户看来，Blockly能够非常直观的创建代码。对于开发者来说，Blockly本质上是一个由积木生成的代码组成的文本框。Blockly能够将积木导出为多种流行的编程语言：

- JavaScript

- Python

- PHP

- Lua

- Dart

其他可视化工具：

Scratch Blocks:由麻省理工学院开发的基于积木的可视化编程，提供了非常简化的编程模型，更适合儿童学习。

Droplet:一款强大的Pencil Code图形化的编辑器，其特点是能够从代码转换为积木。

Snap:基于Scratch-inspired的图形化编程语言，它并不只是一个库，而是套完整的开发环境。

start

完全运行在客户端、无第三方依赖

下载：https://github.com/google/blockly

demo路径：demos/fixed/index.html

引入blockly可以是一个固定大小的div，也可以是可以改变的div

配置

collapse: boolean

允许编程块折叠或者伸展。默认如果工具箱含有类别，为true，否则为false。

comments: boolean

允许编程块含有注释。默认如果工具箱含有类别，为true，否则为false。

css: boolean

如果false，那么不引入css，由文档负责提供样式，默认为true。

disable: boolean

禁用编程块，默认如果工具箱含有类别，为true，否则为false。

grid: object

horizontalLayout: boolean

如果true，工具箱为水平放置，否则竖直放置，默认false。

maxBlocks: number

最大可以使用的块数量，默认无限。

media:string

媒体文件路径. 默认”https://blockly-demo.appspot.com/static/media/“.

oneBasedIndex: boolean

如果ture，列表和字符串从1开始生成，否则从0。默认为1。

readOnly: boolean

只读。如果为true，禁止用户编辑，限制工具箱和垃圾箱，默认为false。

rtl: boolean

如果为true，编辑器反向（针对Arabic、Hebrew地区）。有对应demo。默认为false。

scrollbars: boolean

设置工作区域是否可滚动。工具箱含有分类时默认为true，否则false。

sounds: boolean

如果为false，不播放声音（比如点击和删除），默认为true。

toolbox: XML nodes or string

树状结构。工具箱，表示使用者可以使用的编程块和类。

最重要的部分！

toolboxPosition: string

工具箱位置。start表示水平时在顶部，垂直时在左或者右。end则相反。默认为start。

trashcan: boolean

显示或隐藏垃圾箱。工具箱含有分类时显示，否则不显示。

zoom: object

配置缩放。

代码生成

Blockly不是一门语言，但可以把用户程序翻译成js、python等。

导入或导出

如果需要保存用户的编程块，恢复上次访问的情况，可以导出xml：

var xml = Blockly.Xml.workspaceToDom(workspace);
var xml_text = Blockly.Xml.domToText(xml);

这个可以导出一个最小化但是不易读的包含用户编程块信息的字符串。如果希望获得一个可读但较大的字符串，则使用Blockly.Xml.domToPrettyText 。

从xml字符串恢复到编程块如下：

var xml = Blockly.Xml.textToDom(xml_text);
Blockly.Xml.domToWorkspace(xml, workspace);

云存储

可供可选的云存储服务，安卓端推荐使用。