【Blockly系列教程】添加Blockly工作区

在index.html文件的<main>部分中，您可以看到id为“blockly-div”的div：

<divid="blockly-div"style="height:480px; width:400px;"></div>

这是我们将插入Blockly编辑器的地方。div具有定义的宽度和高度，因为我们将在其中插入固定大小的工作空间。

Blockly工作空间由两部分组成：一个区域，用于组装要转换为代码的块，另一个工具箱包含用户可用的所有块。

定义Blockly工具箱

我们来定义工具箱。在以下之后添加工具箱的结构blockly-div：

<xmlid="toolbox"style="display: none"><categoryname="Loops"colour="120"><blocktype="controls_repeat_ext"><valuename="TIMES"><shadowtype="math_number"><fieldname="NUM">5</field></shadow></value></block></category></xml>

这个XML定义了一个工具箱，在一个名为“Loops”的类别中有一个“重复循环”块。

我们将工具箱的显示样式设置为none，因为我们不打算在我们的网页上显示XML结构 – 它将仅用于以编程方式构造工具箱。

将Blockly工作区添加到编辑视图

现在打开scripts / main.js文件。在main函数结束之前，添加代码以注入Blockly编辑器：

Blockly.inject('blockly-div',{
  media:'../../../media/',
  toolbox: document.getElementById('toolbox'),
  toolboxPosition:'end',
  horizontalLayout:true,
  scrollbars:false});

让我们看一下我们用来启动块编辑器的选项：

• media：blockly可以找到它正在使用的资产的目录，如图标等。
• toolbox：一个XML元素，它定义编辑器的工具箱
• toolboxPosition：应放置工具箱的位置
• horizo​​ntalLayout：布局类型，可以是水平或垂直
• scrollbars：是否在工作区中显示滚动条。

现在刷新页面。选择编辑模式，然后点击其中一个按钮。你应该看到一个Blockly编辑器：

点击循环类别。您应该能够将可用的循环块拖放到工作区并返回。