Google blockly简介（二）Blockly Developer Tools使用
现在国内Google官网打不开Blockly Developer Tools，要想使用此工具，那就用别的办法了。
https://blockly-demo.appspot.com/static/demos/blockfactory/index.html
介绍：
一、定义Toolbox
当选项卡选中Toolbox时，可以通过中部的“+”和“-”，添加或删除Toolbox中的类或块。
添加的块用四种模式，大家可以都试一下
1.New Category，输入类名，新建全新的类(test)；
2.Standard Category，输入标准类的类名，将直接添加整个类；
3.Separator，在类与类之间，新建一个分界线；
4.Standard Toolbox，添加完整的Toolbox到工作区；
二、Workspace
Workspace的作用就是：将块拖放到工作区中，以便在定制工作区中预加载它们。
像Plane游戏中的seat块一样，而且可以通过中部的选项，定义工作区的样式，是否添加Zoom，是否添加Grid，是否添加Scrollbars等。
三、导出文件
我们选择“All”，一共导出三个文件“toolbox.xml”，“workspace.xml”，“workspace.js”
四、构建文件
（1）新建一个简单的test2.html文件，并将上面生成的三个文件放到同一目录下
Simple Blockly 2
（2）在页面正文中的某个位置添加一个空div并设置其大小（放在
***** <\body>中）：（3）将workspace.xml代码，将其复制添加到body中
（4）toolbox.xml代码，将其复制添加到body中
（5）修改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 : 'https://blockly-demo.appspot.com/static/media/',
rtl : false,
scrollbars : true,
sounds : true,
oneBasedIndex : true
};
/* 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);将
var workspace = Blockly.inject(/* TODO: Add ID of div to inject Blockly into */, options);
修改成
var workspace = Blockly.inject("blocklyDiv", options);
修改后的代码：
/* 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 : 'https://blockly-demo.appspot.com/static/media/',
rtl : false,
scrollbars : true,
sounds : true,
oneBasedIndex : true
};
/* Inject your workspace */
//var workspace = Blockly.inject(/* TODO: Add ID of div to inject Blockly into */, options);
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);修改完成后；将代码插入到test2.html文件中
底部添加。
以上整个操作完成。运行test2.html
完整代码：
Simple
10
EQ
AND
TRUE
10
WHILE
i
1
10
1
j
BREAK
ROUND
3.1
0
ROOT
9
SIN
45
PI
EVEN
0
ADD
1
1
SUM
64
10
50
1
100
1
100
FROM_START
text
item
abc
FIRST
text
abc
FROM_START
FROM_START
text
UPPERCASE
abc
BOTH
abc
abc
TEXT
abc
FIRST
list
5
GET
FROM_START
list
SET
FROM_START
list
FROM_START
FROM_START
list
SPLIT
,
NUMERIC
1
#ff0000
100
50
0
#ff0000
#3333ff
0.5
以上部分内容引用 https://www.jianshu.com/p/ed74f318ffc1
/*************************************************************************************************************************************/
如果只想显示blockly控件，如下面web显示：
操作：
（1）在wrokspace上面放置模块想要放置的模块
（2）点击read only选项
（3）如果prewivw框中没有显示，点击
其中，代码区别在workspace.js文件中。
新生成的workspace.js文件
/* TODO: Change toolbox XML ID if necessary. Can export toolbox XML from Workspace Factory. */
var toolbox = document.getElementById("toolbox");
var options = {
readOnly : true,
css : true,
media : 'https://blockly-demo.appspot.com/static/media/',
rtl : false,
scrollbars : true,
sounds : true,
oneBasedIndex : true
};
/* 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);