. 什麼是Blockly的workspace
workspace是Blockly中非常重要的對象，它是其他元件運作的基礎，所有其他Blockly的元件都必須在workspace中才能工作。以下圖為例，圖中藍框以内的範圍都是workspace，左側的ToolBox（下一節的内容）、中間的積木塊組合（blocks）、右下方的垃圾桶和滑動條都是workspace的子對象。通常來說，一個應用隻需要建立一個workspace就足夠。如果想要使用多個workspace，需要解決一些命名空間沖突的問題，本攻略不包括這部分内容。
workspace
2. 建立一個workspace
a. 從github上下載下傳Blockly并解壓，然後将blockly-master檔案夾拷貝到一個新的工作空間下，改名為blockly（友善後續開發）。blockly檔案夾中包含了Blockly的源碼、示例代碼、編譯程式以及編譯後的代碼。如果你的應用對包體大小很敏感，應當進行适當的裁剪。
blockly項目源碼
在同一個目錄下建立一個檔案，并将名字改為 index1.html（任何xxxx.html都可以，名字不重要，後文簡稱index1）。
index1
b. 接下來打開并編輯index1，輸入下面的代碼。
<!DOCTYPE html>
<html>
<head>
<title>我的第一個Blockly應用</title>
<script src="blockly/blockly_compressed.js"></script>
<script src="blockly/msg/js/zh-hans.js"></script>
</head>
<body>
<div id="blocklyDiv" style="width:400px;height:600px"></div>
<script>
var blocklyDiv = document.getElementById('blocklyDiv');
var workspace = Blockly.inject(blocklyDiv, {});
</script>
</body>
</html>
儲存後，用Chrome浏覽器打開index1，你将看到下圖所示的效果，在左上角的灰色線框内右鍵能夠顯示workspace最基本的右鍵菜單，如果不是這樣，檢查一下代碼是否正确，或者在Chrome中按F12調出調試工具檢視具體錯誤。
固定大小的空workspace
c. 現在我們解釋一下上面的代碼。
head中第一行定義了網頁的标題。第二行引入了編譯後的blockly子產品。第三行引入了blockly自帶的簡體中文字元資源。Blockly支援多國語言，是以我們必須明确的引入一種資源（引入多種會産生沖突）。
<head>
<title>我的第一個Blockly應用</title>
<script src="blockly/blockly_compressed.js"></script>
<script src="blockly/msg/js/zh-hans.js"></script>
</head>
body中第一行建立了一個空的div并且定義了它的大小，長400像素，寬600像素。
script中第一行通過id擷取到了剛才建立的div元素（blocklyDiv）。
第二行用Blockly.inject(blocklyDiv, {})函數在div中注入了一個workspace，這是整個代碼最核心的一行。
Blockly提供了Blockly.inject()這樣一個友善的接口供我們建立workspace，其中第一個參數是一個頁面中的元素，第二個參數是workspace的設定選項，在這個例子中我們全部采用預設設定，參數為空。
<body>
<div id="blocklyDiv" style="width:400px;height:600px"></div>
<script>
var blocklyDiv = document.getElementById('blocklyDiv');
var workspace = Blockly.inject(blocklyDiv, {});
</script>
</body>
workspace在第一次建立，也就是inject調用時會填充整個div，但它不會随着div的變化自動适應。在介紹workspace的參數之前，我們先讓workspace能跟随浏覽器大小變化。
3.可變尺寸的workspace
對index1的代碼做如下修改：
<!DOCTYPE html>
<html style="height:100%">
<head>
<title>我的第一個Blockly應用</title>
<script src="blockly/blockly_compressed.js"></script>
<script src="blockly/msg/js/zh-hans.js"></script>
</head>
<body style="height:100%">
<div id="blocklyDiv" style="width:100%;height:100%"></div>
<script>
//生成子產品清單區域
var blocklyDiv = document.getElementById('blocklyDiv');
var workspace = Blockly.inject(blocklyDiv, {});
//調整工作區域大小
var onresize = function (e) {
Blockly.svgResize(workspace);
};
//注冊resize處理函數
window.addEventListener('resize', onresize);
Blockly.svgResize(workspace);
</script>
</body>
</html>
首先修改html和body的樣式，讓他們占整個頁面的100%（完全填充）。同時修改div的樣式，讓他占滿整個body。這樣，當視窗大小改變時，div的大小就會自動随之變化。
但此時workspace并不會随div改變而改變，Blockly提供了svgResize接口，它能讓一個workspace拉伸直到填滿其父元素，這裡的父元素就是blocklyDiv。是以，我們需要得知div元素何時改變了大小，每當它改變大小時就調用一次
Blockly.svgResize(workspace);
修改workspace的大小。
div是随頁面的改變而改變的，在html中，我們可以用事件（event）機制來擷取頁面改變的事件。
window.addEventListener('resize', onresize);
注冊了一個事件回調，當resize事件發生時，調用onresize函數。
我們在上面三行定義了這個onresize函數，它隻做一件事情，就是調用
Blockly.svgResize(workspace);
調整workspace的大小。到此，我們的workspace就能夠随着視窗大小改變而改變了。整個流程大緻如下：
可變尺寸workspace示意圖
4. workspace的設定選項
workspace目前有20個選項（options）可以設定。我們可以在
var workspace = Blockly.inject(blocklyDiv, {});
定義workspace時進行設定，也可以在後的程式中通過workspace.options進行修改。
下面的代碼設定了幾個常用的選項，包括資源目錄（media）、縮放（zoom）、垃圾桶（trashcan）、滾動條（scrollBar）以及工具欄（ToolBox，下一節專門講它的建立）：
var workspace = Blockly.inject(blocklyDiv, {
media: 'blockly/media/',
toolbox: document.getElementById('toolbox'),
zoom: {
controls: true,
wheel: true,
startScale: 1.0,
maxScale: 3,
minScale: 0.5,
scaleSpeed: 1.05
},
trashcan: true,
scrollBar: true
});
實作效果如下：
workspace選項示例
更多的選項效果，可以參考https://developers.google.com/blockly/guides/get-started/web#configuration逐個進行嘗試。