固定大小的工作区

将Blockly放到网页中的最简单方法是将其注入到空的“ div”标签中。

注射

首先，包括核心Blockly脚本和核心块集。请注意，路径可能会有所不同，具体取决于您的页面相对于Blockly的位置：

<script src = “blockly_compressed.js” > </script>

<script src = “blocks_compressed.js” > </script>

然后包括有关用户语言（在本例中为英语）的消息：

<script src = “msg/js/en.js” > </script>

在页面正文中的某处添加一个空div并设置其大小：

<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>

Add the structure of the toolbox (see Defining the Toolbox for more information) anywhere on the page:

<xml id="toolbox" style="display: none">
  <block type="controls_if"></block>
  <block type="controls_repeat_ext"></block>
  <block type="logic_compare"></block>
  <block type="math_number"></block>
  <block type="math_arithmetic"></block>
  <block type="text"></block>
  <block type="text_print"></block>
</xml>

Finally, call the following to inject Blockly into an empty div. This script should be at the bottom of the page, or called by the onload event.

<script>
  var workspace = Blockly.inject('blocklyDiv',
      {toolbox: document.getElementById('toolbox')});
</script>

该workspace变量当前未使用，但是在以后要保存块或生成代码时，它将变得很重要。如果在同一页面上注入了多个Blockly实例，请确保每个返回的工作空间都存储在不同的变量中。

在浏览器中测试页面。您应该看到Blockly的编辑器填充了div，在工具箱中有七个块。这是一个现场演示。

可调整大小的工作区

好的Web应用程序将按块大小调整大小以填充屏幕上的可用空间，而不是固定大小。有几种方法可以做到这一点，包括使用iframe，CSS和JavaScript定位。此页面演示了一种健壮且灵活的覆盖方法。

这是一个三步过程。第一步是定义区域。第二步是块式注入。第三步是将Blockly定位在该区域上。

定义区域

使用HTML表格或divCSS 表格，创建一个空白区域，该区域在调整页面大小时会重排。确保该区域具有ID（在此页面上，我们将其称为blocklyArea）。

这是填充在屏幕底部的表格单元的实时演示。

注射

块式注入与固定大小的块式注入中所述的过程相同。添加脚本，blocklyDiv元素，工具箱和注入脚本。

现在，Blockly应该在页面上运行，只是不在页面应位于的位置（可能在屏幕外）。

定位

最后一步是将blocklyDiv元素放置在blocklyArea 元素上方。为此，请从中删除任何height和width样式blocklyDiv 并添加绝对位置：

<div id="blocklyDiv" style="position: absolute"></div>

然后将注入脚本替换为同样将“ blocklyDiv”定位在“ blocklyArea”上的脚本：

<script>
  var blocklyArea = document.getElementById('blocklyArea');
  var blocklyDiv = document.getElementById('blocklyDiv');
  var workspace = Blockly.inject(blocklyDiv,
      {toolbox: document.getElementById('toolbox')});
  var onresize = function(e) {
    // Compute the absolute coordinates and dimensions of blocklyArea.
    var element = blocklyArea;
    var x = 0;
    var y = 0;
    do {
      x += element.offsetLeft;
      y += element.offsetTop;
      element = element.offsetParent;
    } while (element);
    // Position blocklyDiv over blocklyArea.
    blocklyDiv.style.left = x + 'px';
    blocklyDiv.style.top = y + 'px';
    blocklyDiv.style.width = blocklyArea.offsetWidth + 'px';
    blocklyDiv.style.height = blocklyArea.offsetHeight + 'px';
    Blockly.svgResize(workspace);
  };
  window.addEventListener('resize', onresize, false);
  onresize();
  Blockly.svgResize(workspace);
</script>

- 本文来自网络，如有侵权，请联系本站处理。

2022-02 阅读(15) 评论(0)

标签： program Blockly Graphical