排除開發人員工具

Blockly 開發人員工具是一種網頁式開發人員工具,可自動執行 Blockly 設定程序的某些部分,包括建立自訂區塊、建構工具箱,以及設定 Web Blockly 工作區。

使用工具的 Blockly 開發人員程序包含三個部分:

  • 使用「封鎖工廠」和「封鎖匯出工具」建立自訂構成元素。
  • 使用 Workspace Factory 建構工具箱和預設工作區。
  • 使用 Workspace Factory 設定工作區 (目前僅支援網頁功能)。

封鎖工廠分頁

「Block Factory」分頁可協助您為自訂區塊建立區塊定義區塊程式碼產生器。您可以在這個分頁輕鬆建立、修改和儲存自訂區塊。

定義區塊

這部影片會詳細說明定義區塊的步驟。雖然使用者介面已過時,但醒目顯示的區塊功能仍準確無誤。

管理程式庫

區塊是按照名稱參照,因此您要建立的每個區塊都必須有專屬名稱。UI 會強制執行此機制,並在您「儲存」新的區塊或「更新」現有區塊時明確指出。

您可以按一下「資料庫」按鈕,切換使用先前儲存的區塊,或建立新的空白區塊。變更現有區塊名稱是另一種快速建立相同定義區塊的方式。

匯出和匯入程式庫

封鎖控制項會儲存在瀏覽器的本機儲存空間。如果清除瀏覽器的本機儲存空間 將會刪除封鎖如要無限期儲存模塊,您必須下載程式庫。封鎖程式庫會下載為 XML 檔案,可用來匯入封鎖程式庫,並將其設為下載檔案時的狀態。請注意,匯入區塊程式庫會取代現有程式庫,因此建議您先匯出。

因此,建議您使用匯入和匯出功能維護和共用不同的自訂區塊組合。

「封鎖匯出工具」分頁

設計區塊後,您必須匯出區塊定義和產生器虛設常式,才能在應用程式中使用。這項作業是在「Block Exporter」分頁中進行。

您儲存在「封鎖程式庫」中的所有區塊都會顯示在「封鎖選取器」中。 按一下區塊即可選取或取消選取以便匯出。如果您想選取程式庫中的所有區塊,請使用「選取」→「所有已儲存在封鎖庫」選項。如果您已使用「Workspace Factory」分頁建構工具箱或設定工作區,也可以按一下「Select」→「AllUse In Workspace Factory」(在 Workspace 工廠中使用的所有區塊),即可選取使用過的所有區塊。

匯出設定可讓您選擇要指定哪個產生的語言,以及要為所選區塊定義定義、產生器虛設常式,或兩者皆有。選取之後,按一下「匯出」即可下載檔案。

Workspace 工廠分頁

透過 Workspace Factory,您可以輕鬆在工作區中設定工具箱和預設的區塊組合。您可以透過「Toolbox」和「Workspace」按鈕在編輯工具箱和起始工作區之間切換。

建構工具箱

這個分頁可協助您建構 Toolbox 的 XML。本教材假設您熟悉工具箱的功能。針對要在這裡編輯的工具箱已有 XML,請按一下「Load to Edit」載入工具。

不含類別的工具箱

如果您的幾個區塊,且想要在不顯示任何類別的情況下顯示,只要將這些區塊拖曳至工作區即可,您會在預覽畫面中的工具方塊中看到區塊。

分類工具方塊

如果您想在類別中顯示區塊,請按一下「+」按鈕,然後選取新類別的下拉式選單項目。這樣就能將類別加入類別清單 你可以選取和編輯該類別選取「標準類別」新增個別標準區塊類別 (邏輯、迴圈等),或選取「標準工具箱」新增所有標準 Blockly 類別。使用箭頭按鈕重新排序類別。

如要變更所選類別的名稱或顏色,請使用「編輯類別」下拉式選單。將區塊拖曳至工作區,即可將該區塊新增至所選類別。

進階構成元素

根據預設,您可以將程式庫中的任何標準區塊或任何區塊新增至工具箱。如果您在 JSON 中定義的區塊,但該區塊不在程式庫中,您可以使用「Import Custom Blocks」按鈕匯入這些區塊。

部分區塊應搭配使用,或包含預設值。方法是使用群組和陰影。在編輯器中連結的任何區塊,都會以群組的形式新增至工具箱。您也可以選取子項區塊,然後按一下「Make Shadow」(設為陰影) 按鈕,將附加至其他區塊的區塊變更為陰影區塊。注意:只有不含變數的子項區塊可以變更為陰影區塊。

如果您在工具箱中加入變數或函式區塊,請在工具箱中加入「變數」或「函式」類別,讓使用者能充分運用區塊。進一步瞭解「變數」或「函式」類別

設定工作區 (適用於網頁 Blockly)

如要設定工作區的不同部分,請前往「Workspace Factory」分頁並選取「Workspace」。

選擇工作區選項

設定選項設定不同的值,並在預覽區域中查看結果。啟用格線縮放功能即可查看更多選項。此外,改用類別通常需要更複雜的工作區;新增第一個類別時,系統會自動新增垃圾桶和捲軸。

將預先載入的區塊新增至工作區

此為選用項目,但如果您要在工作區中顯示一組區塊,則必須這麼做:

  • 載入應用程式時。
  • 觸發事件 (升級特定關卡、點選說明按鈕等)。

將方塊拖曳至編輯空間,即可在預覽畫面中查看這些方塊。 您可以選取封鎖群組、停用區塊,以及選取特定區塊陰影區塊。

您可以將這些區塊匯出為 XML (如下所示)。建立工作區後,請立即將 Blockly.Xml.domToWorkspace 新增至工作區:

var xmlText = '<xml xmlns="https://developers.google.com/blockly/xml">' +
    '<block type="math_number"></block></xml>';
Blockly.Xml.domToWorkspace(Blockly.utils.xml.textToDom(xmlText), workspace);

這個程式碼範例會將單一 math_number 區塊新增至工作區。

匯出中

Workspace Factory 提供以下匯出選項:

  • 範例程式碼:產生範例程式碼 html 和 JavaScript,插入自訂的 Blockly 工作區。
  • Toolbox:產生 XML 來指定您的工具箱。
  • Workspace Blocks:產生可載入至工作區的 XML。