應用程式設計

設計使用 Blockly 的應用程式時，可以選擇幾種範例。請盡早考慮這些選擇，因為這會影響使用者需要的積木。

設定

許多 Blockly 應用程式用於描述設定，而非可執行的程式。設定應用程式通常會先初始化工作區中的一個根層級區塊。以 Blockly 開發人員工具的「Block Factory」分頁為例：

用來設計其他區塊的區塊。使用者可以指定區塊名稱、區塊輸入內容、輸入內容是內部還是外部，以及其他項目。

Blockly.Blocks['factory_base'] = {
  init: function() {
    this.setDeletable(false);
    this.setMovable(false);
    this.setEditable(false);
    // etc...
  }
}

Blockly.serialization.blocks.append({'type': 'factory_base'}, workspace);

這會建立無法刪除或移動的區塊，其中包含所有使用者設定。工作區隨時可序列化，以判斷目前的設定。

這類應用程式可能會自動停用未連線至根區塊的任何區塊。您可以在一行中完成這項操作：

workspace.addChangeListener(Blockly.Events.disableOrphans);

連續劇

大多數 Blockly 應用程式都是用來建立序列程式。使用者會將區塊堆疊在一起，並依序執行。

一疊積木，內含移動、向左轉和再次移動的指令。

工作區中的每個 (未停用) 區塊都會構成程式的一部分。如果有多個積木堆疊，系統會先執行較高的積木。(如果兩個堆疊的高度大致相同，系統會優先處理左側的堆疊 (從右向左模式下為右側)。)

工作區隨時可匯出為可執行的程式碼。這段程式碼可在 JavaScript 中於用戶端執行 (使用 eval 或 JS 解譯器)，或在任何語言中於伺服器端執行。

import {javascriptGenerator} from 'blockly/javascript';

var code = javascriptGenerator.workspaceToCode(workspace);

平行計畫

部分 Blockly 應用程式會選擇並行執行所有方塊堆疊，而非依序執行。舉例來說，音樂應用程式可同時執行鼓迴圈和旋律。

如要實作平行執行，其中一種方法是個別產生每個區塊的程式碼：

import {javascriptGenerator} from 'blockly/javascript';

var json = Blockly.serialization.workspaces.save(workspace);

// Store top blocks separately, and remove them from the JSON.
var blocks = json['blocks']['blocks'];
var topBlocks = blocks.slice();  // Create shallow copy.
blocks.length = 0;

// Load each block into the workspace individually and generate code.
var allCode = [];
var headless = new Blockly.Workspace();
for (var i = 0; block < topBlocks.length; i++) {
  var block = topBlocks[i];
  blocks.push(block);
  Blockly.serialization.workspaces.load(json, headless);
  allCode.push(javascriptGenerator.workspaceToCode(headless));
  blocks.length = 0;
}

如果目標語言是 JavaScript，則 allCode 陣列可用於建立多個 JS 解譯器，以便同時執行。如果目標語言是 Python 等語言，則 allCode 陣列可能會組合成使用執行緒模組的單一程式。

與任何平行程式一樣，您必須謹慎決定任何共用資源，例如變數和函式。

以事件為準的程式

事件處理常式只是由系統呼叫的函式，而非由程式呼叫。這些方塊可以封閉要執行的方塊堆疊，也可以是位於方塊堆疊頂端的標頭。

兩個「on mouse click」區塊，一個含有陳述式輸入內容，另一個含有下一個連線。

有些開發人員喜歡在事件方塊頂端加上「帽子」，讓事件方塊看起來與其他方塊不同。這不是 Blockly 的預設外觀，但可以透過覆寫算繪器常數 ADD_START_HATS 為 true (自訂算繪器程式碼研究室 - 覆寫常數)，或新增主題並在方塊樣式中設定帽子選項來新增。如要進一步瞭解如何將帽子設定為主題的一部分，請參閱主題說明文件中的「區塊樣式」。

與「on mouse click」相同的積木，但頂端有帽子，形成積木上的凸起。

在事件驅動模型中，您可能也需要為程式啟動建立處理常式。在這個模型下，系統會忽略工作區中未連線至事件處理常式的任何方塊，且不會執行這些方塊。

設計使用事件的系統時，請考慮是否可能或適合支援相同事件處理常式的多個執行個體。

工作區版面配置

從左到右配置螢幕的方式有兩種。其中一種方式是從左側的工具列開始，中間是工作區，右側是輸出內容的視覺化呈現。Scratch 第 1 版和 Made with Code 也使用這個版面配置。

應用程式，左側是工具列，中間是工作區，右側是迷宮 (輸出視覺化)。

另一種方式是從左側的輸出內容視覺化開始，中間是工具列，右側是工作區。Scratch 第 2 版和大多數 Blockly 應用程式都使用這個版面配置。

應用程式畫面：左側是迷宮 (輸出內容的視覺化呈現)，中間是工具列，右側是工作區。

無論是哪種情況，工作區都應延伸至可用螢幕大小，因為使用者需要盡可能多的空間來進行程式設計。如上方的螢幕截圖所示，第一個版面配置在寬螢幕上的效能不佳，因為使用者的程式碼和輸出視覺化內容會分開顯示。第二種版面配置則可提供額外空間，方便顯示較大的節目，同時讓三個部分保持緊密相鄰。

對使用者來說，先考慮要解決的問題，然後查看提供的工具，最後才開始程式設計，也是合乎邏輯的做法。

當然，阿拉伯文和希伯來文的翻譯需要將整個順序顛倒。

在某些情況下 (例如使用少量簡單的積木時)，工具箱可能適合放在工作區上方或下方。在這些情況下，Blockly 支援工具箱中的水平捲動，但應謹慎使用。

建議：將節目視覺化內容放在工具列旁邊。