Cấu trúc khối trong JavaScript

Trong tài liệu này, chúng ta sẽ thảo luận về cách sử dụng JavaScript để xác định các đầu vào và trường (bao gồm cả nhãn) trong khối của bạn. Nếu bạn chưa quen với những thuật ngữ này, hãy xem phần Cấu trúc của một khối trước khi tiếp tục.

Bạn cũng có thể xác định các đầu vào, trường và kết nối trong JSON.

Thêm thông tin đầu vào

API JavaScript bao gồm một phương thức append cho mỗi input type:

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');
}

Mỗi phương thức appendInput có thể lấy một chuỗi giá trị nhận dạng. Chuỗi này được trình tạo mã dùng để truy xuất mã cho khối được kết nối với đầu vào. Các trình tạo mã hiếm khi tham chiếu đến các đầu vào giả và cuối hàng, vì vậy, thường không có lý do gì để chỉ định cho chúng một giá trị nhận dạng.

API JavaScript cũng bao gồm một phương thức appendInput chung để nối đầu vào tuỳ chỉnh. Xin lưu ý rằng trong trường hợp này, giá trị nhận dạng sẽ được truyền trực tiếp đến hàm khởi tạo của thành phần đầu vào tuỳ chỉnh.

JavaScript

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

Tất cả các phương thức appendInput (cả phương thức chung và không chung) đều trả về đối tượng đầu vào để có thể được định cấu hình thêm bằng cách sử dụng phương thức liên kết. Có 3 phương thức tích hợp sẵn được dùng để định cấu hình các thành phần đầu vào.

Thêm trường

Sau khi tạo và thêm một đầu vào vào một khối bằng appendInput, bạn có thể tuỳ ý thêm bất kỳ số lượng trường nào vào đầu vào. Các trường này thường được dùng làm nhãn để mô tả mục đích của từng dữ liệu đầu vào.

JavaScript

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

Trường đơn giản nhất là nhãn. Quy ước của Blockly là sử dụng tất cả văn bản chữ thường, ngoại trừ tên riêng (ví dụ: Google, SQL).

Một hàng đầu vào có thể chứa số lượng trường bất kỳ. Bạn có thể kết hợp nhiều lệnh gọi appendField để thêm một số trường vào cùng một hàng đầu vào một cách hiệu quả.

JavaScript

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

Lệnh gọi appendField('hello') thực ra là một phím tắt để sử dụng hàm dựng FieldLabel rõ ràng: appendField(new Blockly.FieldLabel('hello')). Thời điểm duy nhất mà bạn nên sử dụng hàm khởi tạo là khi chỉ định tên lớp để có thể tạo kiểu cho nhãn bằng quy tắc CSS.

Kiểm tra kết nối

JavaScript

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

Phương thức setCheck được dùng để kiểm tra loại kết nối. Nếu được cung cấp một đối số có giá trị rỗng, thì đầu vào này có thể được kết nối với bất kỳ khối nào. Hãy xem phần Kiểm tra kết nối để biết thông tin chi tiết.

Căn chỉnh các trường

JavaScript

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

Phương thức setAlign được dùng để căn chỉnh các trường trong một dữ liệu đầu vào. Có 3 giá trị tự mô tả có thể được truyền dưới dạng đối số cho hàm này: Blockly.inputs.Align.LEFT, Blockly.inputs.Align.RIGHT và Blockly.inputs.Align.CENTER.

Khi một khối được hiển thị ở chế độ từ phải sang trái (ví dụ: tiếng Ả Rập và tiếng Do Thái), trái và phải sẽ bị đảo ngược. Do đó, Blockly.inputs.Align.RIGHT sẽ căn chỉnh các trường sang trái.