图形化编程工具blockly——工作区

下载blockly

关于什么是blockly请参见google可视化编程工具blockly入门。

首先需要获取blockly代码，官方文档中获取blockly代码有npm、github、Unpkg等多种方式。本文使用github，访问blockly github仓库链接https://github.com/google/blockly并下载，下载后的blockly代码目录结构如下：

blockly代码目录结构

注：上手阶段只需关注图中红色标注的三个文件和目录，其中msg目录暂时只用到msg/js目录中的语言包，本文采用msg/js/zh-hans.js，表示为代码块使用的语言为中文。

项目目录结构

新建目录名为blockly-demo的文件夹，增加index.html，将已经下载的blockly代码也复制到该目录下，如下图：

blockly-demo项目目录结构

导入基础模块

使用自己喜欢的编辑器，添加如下代码，使用blockly需要引入blockly_compressed.js、blocks_compressed.js、msg/js/zh-hans.js三个基础模块，其中blockly_compressed.js为核心脚本，blocks_compressed.js为核心图形代码块集，zh-hans.js为语言模块，本例使用中文。

创建工作区

现在，通过浏览器打开index.html文件会显示一片空白，什么都不会发生，要使用blockly需要首先创建工作区，工作区是blockly的核心，下图就是一个典型的工作区的样子，由工具箱和图形代码编辑区两部分组成。

工作区=工具箱+编辑区

要创建工作区首先需要创建一个空白的div元素来承载，另外通过嵌入xml来表示工具箱，由于xml不能在浏览器中正常渲染，因此需要设置为不可见，编辑index.html增加如下代码

接下来就是调用blockly提供的api来生成工作区了，编辑index.html在页面的最后增加js脚本，Blockly.inject方法用来注入工作区到id为blocklyDiv的DOM元素中，也就是传入的第一个参数，第二个参数为键值对的字典形式的配置参数，这里传入的参数为id为toolbox表示的工具箱的信息。

index.html的完整代码参考

此时浏览器再次打开或者刷新已打开的index.html，页面显示如下图，试试拖放工具箱中的代码块到编辑区，此时我们就完成了一个固定大小的工作区的创建。

完成工作区的注入