blockly - 工作區域

固定大小的工作區

將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>