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。

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 會將欄位靠左對齊。