JavaScript 中的區塊結構

本文將說明如何使用 JavaScript 在區塊中定義輸入內容和欄位 (包括標籤)。如果您不熟悉這些術語，請先參閱「區塊的結構」，再繼續閱讀本文。

您也可以在 JSON 中定義輸入內容、欄位和連線。

附加輸入內容

JavaScript API 針對每個輸入類型，提供 append 方法：

JavaScript

init: function() {
  // ...
  this.appendEndRowInput()
      .appendField('for each')
      .appendField('item')
      .appendField(new Blockly.FieldVariable(), 'VAR');
  this.appendValueInput('LIST')
      .setCheck('Array')
      .setAlign(Blockly.inputs.Align.RIGHT)
      .appendField('in list');
  this.appendStatementInput('DO')
      .appendField('do');
  this.appendDummyInput()
      .appendField('end');
}

每個 appendInput 方法都可以使用 ID 字串，程式碼產生器會使用該 ID 字串，為與輸入內容連結的區塊擷取程式碼。程式碼產生器很少參照虛擬資料和資料列結尾輸入內容，因此通常沒有理由為這些項目指派 ID。

JavaScript API 也包含一般 appendInput 方法，可用於附加自訂輸入內容。請注意，在這種情況下，應將 ID 直接傳遞至自訂輸入內容的建構函式。

JavaScript

init: function() {
  // ...
  this.appendInput(new MyCustomInput('INPUT_NAME'))
      .appendField('an example label')
}

所有 appendInput 方法 (泛型和非泛型) 都會傳回輸入物件，以便進一步使用方法鏈結進行設定。有三種內建方法可用於設定輸入內容。

附加欄位

建立輸入內容並使用 appendInput 附加至區塊後，您可以選擇將任意數量的欄位附加至輸入內容。這些欄位通常用作標籤，用來說明每個輸入內容的用途。

JavaScript

init: function() {
  // ...
  this.appendDummyInput()
      .appendField('hello');
}

最簡單的欄位是標籤。Blockly 的慣例是使用全小寫文字，但專有名詞 (例如 Google、SQL) 除外。

輸入資料列可包含任意數量的欄位。您可以將多個 appendField 呼叫鏈結在一起，以便有效率地將多個欄位新增至同一個輸入資料列。

JavaScript

init: function() {
  // ...
  this.appendDummyInput()
      .appendField('hello')
      .appendField(new Blockly.FieldLabel('Neil', 'person'));
}

appendField('hello') 呼叫其實是使用明確的 FieldLabel 建構函式 appendField(new Blockly.FieldLabel('hello')) 的捷徑。您只需要在指定類別名稱時使用建構函式，這樣才能使用 CSS 規則為標籤設定樣式。

連線檢查

JavaScript

init: function() {
  // ...
  this.appendValueInput('NUM')
      .setCheck('Number');
}

setCheck 方法用於檢查連線類型。如果提供的引數為空值 (預設值)，則此輸入內容可能會連結至任何區塊。詳情請參閱「連線檢查」一文。

對齊欄位

JavaScript

init: function() {
  // ...
  this.appendValueInput('LIST')
      .appendField('in list')
      .setAlign(Blockly.inputs.Align.RIGHT);
}

setAlign 方法用於對齊輸入內容中的欄位。有三個自描述值可做為引數傳遞至此函式：Blockly.inputs.Align.LEFT、Blockly.inputs.Align.RIGHT 和 Blockly.inputs.Align.CENTER。

當區塊以由右到左模式 (例如阿拉伯文和希伯來文) 轉譯時，左側和右側會顛倒。因此 Blockly.inputs.Align.RIGHT 會將欄位對齊至左側。