本頁面由 Cloud Translation API 翻譯而成。

將外掛程式欄位新增至 Block Factory

Blockly Developer Tools 可讓您方塊！除了核心 Blockly 提供的欄位外，它還支援以外掛程式形式發布的欄位。如果您已建立自訂欄位，可以按照本指南的說明，將支援功能新增至 Block Factory。您必須先在 npm 上發布自訂欄位，才能新增支援。您也必須承諾更新欄位，以便隨時掌握 Blockly 的變更，否則我們日後可能需要將其從 Block Factory 中移除。

區塊工廠上的開發

Block Factory 的原始碼位於區塊範例中 examples/developer-tools 的存放區目錄。

如要將變更內容提交至 blockly-samples 中的開發人員工具，您必須按照 blockly-samples 的一般開發步驟進行。不過，與使用外掛程式不同，您必須直接從 examples/developer-tools 目錄執行 npm install，而非在 blockly-samples 的根層級執行。

安裝外掛程式

為了讓 Block Factory 在預覽畫面中顯示自訂欄位，您必須安裝自訂欄位。將您的欄位新增為和開發人員工具然後，在 Android 應用程式中註冊或執行其他必要的設定 developer-tools/src/blocks/index.ts。

建立欄位區塊

由於 Block Factory 使用模塊建立自訂構成元素，因此您需要一個區塊代表您的自訂欄位。

建立區塊定義

您需要為欄位設計區塊；如果想取得中繼訓練，可以甚至使用 Block Factory！封鎖條件應允許使用者以便進行欄位設定，例如預設值和名稱將這個區塊定義新增至 developer-tools/src/blocks/fields.ts，然後在 developer-tools/src/blocks/index.ts 中匯入。

將區塊新增至工具箱

接下來，需要將這個區塊加入工具箱定義中讓使用者享有低延遲和高可用性工具箱定義位於 developer-tools/src/toolbox.ts 中。您的區塊應加入「欄位」類別。

程式碼產生器

Block Factory 會使用您熟悉的 Blockly 程式碼產生器系統運作。每個區塊都有一個區塊程式碼產生器，可處理 Block Factory 產生的每種類型輸出內容，而父項區塊會將子項區塊的程式碼組合成正確的輸出內容。若要新增對自訂的 ] 欄位，您需要為每個程式碼產生器加入區塊程式碼產生器函式產生器類別。

在 output-generators/fields 目錄。您將新增對這個檔案的下列每個產生器都採用區塊程式碼產生器。匯入複製到 blocks/index.ts 檔案，當應用程式會載入區塊程式碼產生器函式。

JavaScript 定義

javascriptDefinitionGenerator 會建立程式碼，並納入包含自訂欄位的區塊的 JavaScript 定義。這些廣告活動這表示區塊程式碼產生器應傳回一行程式碼 .appendField(new YourFieldConstructor(arg1, arg2), 'userSpecifiedName')。注意事項這行程式碼「不包含」分號，因為包含多個欄位將會多次呼叫 appendField 。建構函式中的引數是從使用者的值提取請在欄位區塊中設定以下是這個區塊程式碼產生器的範例 FieldAngle:

javascriptDefinitionGenerator.forBlock['field_angle'] = function (
  block: Blockly.Block,
  generator: JavascriptDefinitionGenerator,
): string {
  const name = generator.quote_(block.getFieldValue('FIELDNAME'));
  const angle = block.getFieldValue('ANGLE');
  return `.appendField(new FieldAngle(${angle}), ${name})`;
};

使用者從「欄位」拖曳的角度區塊「封鎖」類別工廠工具箱上有兩個欄位：

FIELDNAME：使用者可以在自訂區塊中設定欄位名稱
ANGLE：使用者可設定預設角度值

在這個區塊程式碼產生器中，我們會取得預設角度值，並將其做為唯一引數傳遞至 FieldAngle 建構函式。系統一律會傳遞欄位名稱做為 appendField 的第二個引數。

JSON 定義

jsonDefinitionGenerator 類似，但這會輸出 JSON 的一部分您的欄位對應的區塊定義。通常，這個程式碼是 JSON 物件，其中包含：

type：對應至 Blockly 欄位註冊表中的欄位名稱
name：使用者可以在自訂區塊中設定欄位名稱
欄位 JSON 初始化作業所需的任何其他自訂屬性方法。

以下是 FieldAngle 的範例：

jsonDefinitionGenerator.forBlock['field_angle'] = function (
  block: Blockly.Block,
  generator: JsonDefinitionGenerator,
): string {
  const code = {
    type: 'field_angle',
    name: block.getFieldValue('FIELDNAME'),
    angle: block.getFieldValue('ANGLE'),
  };
  return JSON.stringify(code);
};

程式碼標頭

程式碼標頭產生器會建立 Block Factory 中顯示的程式碼標頭輸出內容。此輸出內容可在 esmodule 匯入和指令碼標記之間切換取決於使用者想要載入程式碼的方式不同的產生器執行個體：每種情況各一個您需要新增區塊程式碼分別產生產生器以下是 FieldAngle 的範例：

importHeaderGenerator.forBlock['field_angle'] = function (
  block: Blockly.Block,
  generator: CodeHeaderGenerator,
): string {
  generator.addHeaderLine(
    `import {registerFieldAngle, FieldAngle} from '@blockly/field-angle';`,
  );
  generator.addHeaderLine(`registerFieldAngle();`);
  return '';
};

scriptHeaderGenerator.forBlock['field_angle'] = function (
  block: Blockly.Block,
  generator: CodeHeaderGenerator,
): string {
  generator.addHeaderLine(
    `<script src="https://unpkg.com/@blockly/field-angle"></script>`,
  );
  generator.addHeaderLine(`registerFieldAngle();`);
  return '';
};

這些產生器具有名為 addHeaderLine 的方法，可讓您指定在欄位在程式碼中使用前，應呼叫的一行程式碼。一般而言包括匯入欄位或透過指令碼載入欄位標記，也許會呼叫函式，以 Blockly 的欄位登錄檔。

這兩種區塊程式碼產生器應透過呼叫加入所有程式碼至 addHeaderLine。這個函式可確保系統只會顯示每一行標題行就算在單一自訂欄位區塊中多次使用封鎖。區塊程式碼產生器應傳回空字串。

產生器存根體

最後，我們有發電機可以為欄位建立發電機虛設常式。於這就是區塊程式碼產生器產生程式碼感到困惑嗎？那麼簡單聽起來！

自訂區塊的產生器虛設常式包含預製變數代表區塊中的每個欄位接著，使用者必須完成 TODO，才能將所有這些變數組合成自訂區塊會傳回的最終程式碼字串。這通常意味著所有區塊程式碼產生器傳回建立這個自訂變數的那一行說使用者製作一個能把陽光照射到畫布上的自訂方塊。他們將角度欄位新增至區塊，並命名為 "SUN_DIRECTION"。產生器此區塊的虛設常式會包含 const angle_sun_direction = block.getFieldValue("SUN_DIRECTION"); 行。這是「區塊程式碼」角度欄位的產生器必須傳回：

generatorStubGenerator.forBlock['field_angle'] = function (
  block: Blockly.Block,
  generator: GeneratorStubGenerator,
): string {
  const name = block.getFieldValue('FIELDNAME');
  const fieldVar = generator.createVariableName('angle', name);
  return `const ${fieldVar} = block.getFieldValue(${generator.quote_(
    name,
  )});\n`;
};

如要為變數取得標準化名稱，您可以呼叫 generator.createVariableName，並傳入欄位類型 (例如 angle、number 等) 以及使用者為欄位命名的名稱。

測試

編寫完所有這些部分後，您應該就能在 blockly-samples/examples/developer-tools 目錄中執行 npm start，啟動 Block Factory。您應該可以從欄位類別拖曳方塊，將方塊新增至方塊的輸入內容，並觀察輸出內容的變化。請確認區塊看起來都沒問題每個輸出區段的程式碼也都是正確。