應用程式設計

設計使用 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 應用程式都是用來建立序列程式。使用者會將區塊堆疊在一起，並依序執行。

一疊方塊，其中包含移動、左轉和再次移動的指令。

工作區中的每個 (未停用的) 區塊都會成為程式的一部分。如果有多個堆疊區塊，系統會優先執行較高的堆疊區塊。(如果兩個堆疊高度相近，系統會優先顯示左側的堆疊 (在 RTL 模式中為右側)。)

您隨時可以將工作區匯出為可執行的程式碼。這個程式碼可在 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 支援工具箱中的水平捲動功能，但應謹慎使用。

建議：將節目圖表放置在工具列旁邊。