Xác định khối

Định nghĩa khối mô tả giao diện và cách hoạt động của khối, bao gồm cả văn bản, màu sắc, hình dạng và những khối khác mà nó có thể kết nối.

Định dạng JSON so với API JavaScript

Blockly có hai cách xác định quy tắc chặn: đối tượng JSON và hàm JavaScript. Định dạng JSON được thiết kế để đơn giản hoá việc bản địa hoá khi phát triển cho các ngôn ngữ có thứ tự từ khác nhau. Bạn nên sử dụng định dạng JSON phương pháp xác định các khối.

Tuy nhiên, định dạng JSON không thể trực tiếp xác định các tính năng nâng cao như làm đối tượng biến đổi hoặc trình xác thực. Các mã này phải được viết bằng JavaScript, thường là phần mở rộng.

Các ứng dụng sử dụng phương thức triển khai JavaScript ban đầu của Blockly cũng có thể ghi định nghĩa khối trực tiếp đến lệnh gọi hàm Blockly API cấp thấp hơn, được hiển thị trong các ví dụ về JavaScript dưới đây.

JSON

Blockly.defineBlocksWithJsonArray([{
  "type": "string_length",
  "message0": 'length of %1',
  "args0": [
    {
      "type": "input_value",
      "name": "VALUE",
      "check": "String"
    }
  ],
  "output": "Number",
  "colour": 160,
  "tooltip": "Returns number of letters in the provided text.",
  "helpUrl": "http://www.w3schools.com/jsref/jsref_length_string.asp"
}]);

JavaScript

Blockly.Blocks['string_length'] = {
  init: function() {
    this.appendValueInput('VALUE')
        .setCheck('String')
        .appendField('length of');
    this.setOutput(true, 'Number');
    this.setColour(160);
    this.setTooltip('Returns number of letters in the provided text.');
    this.setHelpUrl('http://www.w3schools.com/jsref/jsref_length_string.asp');
  }
};

Hàm init tạo ra hình dạng của khối. Trong bối cảnh này từ khoá this là khối thực tế được tạo.

Cả hai ví dụ đều tải cùng một "string_length" chặn.

Trên web, định dạng JSON được tải bằng cách sử dụng hàm initJson. Thao tác này cũng cho phép kết hợp hai định dạng này trong các trang web Blockly. Đó là ưu tiên xác định khối của bạn bằng JSON bất cứ khi nào có thể và sử dụng JavaScript chỉ dành cho các phần của định nghĩa khối mà JSON không hỗ trợ.

Dưới đây là ví dụ về một khối chủ yếu được xác định bằng JSON, nhưng được mở rộng bằng cách sử dụng API JavaScript để làm nổi bật chú thích động.

JavaScript

var mathChangeJson = {
  "message0": "change %1 by %2",
  "args0": [
    {"type": "field_variable", "name": "VAR", "variable": "item", "variableTypes": [""]},
    {"type": "input_value", "name": "DELTA", "check": "Number"}
  ],
  "previousStatement": null,
  "nextStatement": null,
  "colour": 230
};

Blockly.Blocks['math_change'] = {
  init: function() {
    this.jsonInit(mathChangeJson);
    // Assign 'this' to a variable for use in the tooltip closure below.
    var thisBlock = this;
    this.setTooltip(function() {
      return 'Add a number to variable "%1".'.replace('%1',
          thisBlock.getFieldValue('VAR'));
    });
  }
};

Màu khối

Màu chính của một khối được xác định bởi thuộc tính JSON colour, thuộc tính này hàm block.setColour(..), hoặc bằng cách sử dụng chủ đề và xác định một khối phong cách.

JSON

{
  // ...,
  "colour": 160,
}

JavaScript

init: function() {
  // ...
  this.setColour(160);
}

Xem hướng dẫn về khối màu để biết thêm chi tiết.

Kết nối câu lệnh

Người dùng có thể tạo trình tự khối bằng cách sử dụng nextStatement và previousStatement giắc cắm. Trong bố cục chuẩn của Blockly, các kết nối này ở trên cùng và dưới cùng, với các khối được xếp chồng lên nhau theo chiều dọc.

Khối có trình kết nối trước đó không thể có trình kết nối đầu ra và ngược lại. Cụm từ khối câu lệnh đề cập đến một khối không có đầu ra giá trị nào. Một khối câu lệnh thường sẽ có cả kết nối trước đó và kết nối tiếp theo.

Bạn có thể kết nối nextStatement và previousStatement đã nhập, nhưng tính năng này không được sử dụng bởi các khối tiêu chuẩn.

Kết nối tiếp theo

Tạo một điểm ở cuối khối để các câu lệnh khác có thể xếp chồng bên dưới. Một khối có kết nối tiếp theo nhưng không có kết nối nào trước đó thường đại diện cho một sự kiện và có thể được định cấu hình để hiển thị với một chiếc mũ.

JSON

Chưa nhập:

{
  ...,
  "nextStatement": null,
}

Đã nhập (hiếm):

{
  "nextStatement": "Action",
  ...
}

JavaScript

Chưa nhập:

this.setNextStatement(true);  // false implies no next connector, the default

Đã nhập (hiếm):

this.setNextStatement(true, 'Action');

Kết nối trước đó

Tạo một khía ở đầu khối để khối có thể kết nối dưới dạng ngăn xếp tuyên bố.

Các khối có kết nối trước đó không thể có kết nối đầu ra.

JSON

Chưa nhập:

{
  ...,
  "previousStatement": null,
}

Đã nhập (hiếm):

{
  "previousStatement": "Action",
  ...
}

JavaScript

Chưa nhập:

this.setPreviousStatement(true);  // false implies no previous connector, the default

Đã nhập (hiếm):

this.setPreviousStatement(true, 'Action');

Chặn đầu ra

Mỗi khối có thể có một đầu ra duy nhất, được biểu thị dưới dạng một đầu nối ghép hình nam trên cạnh đầu. Đầu ra kết nối với đầu vào giá trị. Các khối có đầu ra là thường được gọi là khối giá trị.

JSON

Chưa nhập:

{
  // ...,
  "output": null,
}

Đã nhập:

{
  // ...,
  "output": "Number",
}

JavaScript

Chưa nhập:

init: function() {
  // ...
  this.setOutput(true);
}

Đã nhập:

init: function() {
  // ...
  this.setOutput(true, 'Number');
}

Các khối có trình kết nối đầu ra cũng không thể có rãnh câu lệnh trước đó.

Chặn đầu vào

Một khối có một hoặc nhiều đầu vào, trong đó mỗi đầu vào có một chuỗi trường và có thể kết thúc bằng một đường kết nối. Có một vài các loại đầu vào tích hợp sẵn.

  • Đầu vào giá trị: Kết nối với kết nối đầu ra của khối giá trị. Khối math_arithmetic (cộng, trừ) là một ví dụ về một khối có hai đầu vào giá trị.
  • Đầu vào câu lệnh: Kết nối với một kết nối trước của khối câu lệnh. Chiến lược phát hành đĩa đơn phần lồng nhau của vòng lặp while là ví dụ về đầu vào câu lệnh.
  • Phương thức nhập giả: Không có khối kết nối. Hoạt động như một dòng mới khi khối được định cấu hình để sử dụng đầu vào giá trị bên ngoài.
  • Đầu vào hàng cuối: Không có kết nối khối và luôn hoạt động như một dòng mới.

Bạn cũng có thể tạo mục nhập tuỳ chỉnh để hỗ trợ tuỳ chỉnh kết xuất.

Định dạng JSON và API JavaScript sử dụng các mô hình hơi khác nhau để mô tả thông tin đầu vào của họ.

Dữ liệu đầu vào và trường trong JSON

Các khối JSON xác định được có cấu trúc dưới dạng một chuỗi nội suy chuỗi thông báo ( message0, message1, ...), trong đó mỗi mã thông báo nội suy (%1, %2, ...) là một trường hoặc một điểm cuối đầu vào (đây là nơi trình kết nối đầu vào hiển thị trong thông báo) trong mảng argsN JSON phù hợp. Định dạng này là nhằm mục đích quốc tế hoá dễ dàng.

JSON

{
  "message0": "set %1 to %2",
  "args0": [
    {
      "type": "field_variable",
      "name": "VAR",
      "variable": "item",
      "variableTypes": [""]
    },
    {
      "type": "input_value",
      "name": "VALUE"
    }
  ]
}

Mã thông báo nội suy phải khớp hoàn toàn với mảng args0: không trùng lặp, không thiếu sót. Mã thông báo có thể xuất hiện theo bất kỳ thứ tự nào, cho phép các mã ngôn ngữ để thay đổi bố cục của khối.

Văn bản ở hai bên của mã thông báo nội suy được cắt bớt khoảng trắng. Văn bản sử dụng ký tự % (ví dụ: khi tham chiếu đến một tỷ lệ phần trăm) nên sử dụng %% để không được hiểu là mã thông báo nội suy.

Thứ tự của các đối số và loại đối số sẽ xác định hình dạng của đối số chặn. Việc thay đổi một trong các chuỗi này có thể làm thay đổi hoàn toàn bố cục của khối. Điều này đặc biệt quan trọng trong các ngôn ngữ có thứ tự từ khác ngoài tiếng Anh. Cân nhắc ngôn ngữ giả định trong đó "set %1 to %2" (như đã sử dụng trong ví dụ ở trên) cần được đảo ngược để nói "put %2 in %1". Đang thay đổi một chuỗi này (và để lại phần còn lại của JSON chưa được chạm đến) sẽ dẫn đến khối sau:

Blockly tự động thay đổi thứ tự của các trường, tạo một mục nhập giả, và chuyển từ nguồn đầu vào bên ngoài sang bên trong.

Blockly cũng tự động thay thế mọi ký tự dòng mới (\n) trong tin nhắn có đầu vào hàng kết thúc.

JSON

{
  "message0": "set %1\nto %2",
  "args0": [
    {
      "type": "field_variable",
      "name": "VAR",
      "variable": "item",
      "variableTypes": [""]
    },
    {
      "type": "input_value",
      "name": "VALUE"
    }
  ]
}

Args

Mỗi chuỗi thông báo được ghép nối với một mảng args có cùng số. Cho ví dụ: message0 đi với args0. Mã nội suy (%1, %2, ...) tham chiếu đến các mục của mảng args. Mỗi đối tượng có một Chuỗi type. Các thông số còn lại sẽ khác nhau tuỳ theo loại:

Bạn cũng có thể xác định các trường tuỳ chỉnh của riêng mình và dữ liệu đầu vào tuỳ chỉnh rồi truyền chúng dưới dạng đối số.

Mỗi đối tượng cũng có thể có trường alt. Trong trường hợp Blockly không nhận dạng type của đối tượng, thì đối tượng alt sẽ được dùng tại vị trí tương ứng. Cho ví dụ: nếu thêm một trường mới có tên là field_time vào Blockly, hãy chặn bằng cách sử dụng trường này có thể sử dụng alt để xác định một field_input dự phòng cho các phiên bản cũ hơn thuộc Blockly:

JSON

{
  "message0": "sound alarm at %1",
  "args0": [
    {
      "type": "field_time",
      "name": "TEMPO",
      "hour": 9,
      "minutes": 0,
      "alt":
        {
          "type": "field_input",
          "name": "TEMPOTEXT",
          "text": "9:00"
        }
    }
  ]
}

Đối tượng alt có thể có đối tượng alt riêng, do đó cho phép tạo chuỗi. Cuối cùng, nếu Blockly không thể tạo đối tượng trong mảng args0 (sau khi thử đối tượng alt bất kỳ), thì đối tượng đó sẽ bị bỏ qua.

Một mục nhập giả sẽ tự động được thêm vào cuối khối nếu Chuỗi message kết thúc bằng văn bản hoặc các trường không có trong giá trị nhập vào. Do đó, nếu dữ liệu đầu vào cuối cùng trên một khối là một dữ liệu đầu vào giả thì nó có thể bị bỏ qua khỏi mảng args và không cần nội suy vào message. Chiến lược phát hành đĩa đơn tự động bổ sung đầu vào giả cho phép người dịch thay đổi message mà không cần sửa đổi phần còn lại của JSON. Xem ví dụ về "set %1 to %2" (không có phương thức nhập giả) và "put %2 in %1" (đã thêm phương thức nhập giả) trước đó trên trang này.

implicitAlign0

Trong một số ít trường hợp, dữ liệu đầu vào giả theo sau được tạo tự động cần được căn chỉnh với "RIGHT" hoặc "CENTRE". Giá trị mặc định nếu không được chỉ định là "LEFT".

Trong ví dụ bên dưới, message0 là "send email to %1 subject %2 secure %3" và Blockly tự động thêm mục nhập giả cho hàng thứ ba. Chế độ cài đặt implicitAlign0 thành "RIGHT" buộc hàng này phải được căn phải. Chiến dịch này căn chỉnh áp dụng cho tất cả dữ liệu đầu vào không được xác định rõ ràng trong JSON định nghĩa khối, bao gồm cả mục nhập hàng cuối thay thế các ký tự dòng mới ('\n') trong tin nhắn. Ngoài ra, còn có thuộc tính không dùng nữa lastDummyAlign0 có hành vi giống như implicitAlign0.

Khi thiết kế các khối cho RTL (tiếng Ả Rập và Do Thái), bên trái và bên phải được đảo ngược. Do đó, "RIGHT" sẽ căn chỉnh các trường sang trái.

message1, args1, implicitAlign1

Một số khối được chia tự nhiên thành hai hoặc nhiều phần riêng biệt. Hãy xem xét khối lặp lại có hai hàng:

Nếu khối này được mô tả bằng một thông báo duy nhất, thì thuộc tính message0 sẽ là "repeat %1 times %2 do %3". Chuỗi này không tiện cho người dịch, rất khó để giải thích ý nghĩa của việc thay thế %2. Người giả %2 dữ liệu đầu vào thậm chí có thể không được mong muốn bằng một số ngôn ngữ. Có thể có nhiều các khối muốn chia sẻ văn bản của hàng thứ hai. Phương pháp tiếp cận tốt hơn là để JSON sử dụng nhiều thông báo và thuộc tính args:

JSON

{
  "type": "controls_repeat_ext",
  "message0": "repeat %1 times",
  "args0": [
    {"type": "input_value", "name": "TIMES", "check": "Number"}
  ],
  "message1": "do %1",
  "args1": [
    {"type": "input_statement", "name": "DO"}
  ],
  "previousStatement": null,
  "nextStatement": null,
  "colour": 120
}

Bạn có thể xác định số lượng thuộc tính message, args và implicitAlign bất kỳ ở định dạng JSON, bắt đầu bằng 0 và tăng dần theo tuần tự. Lưu ý rằng Block Factory không thể chia thông điệp thành nhiều phần, nhưng làm điều đó theo cách thủ công rất đơn giản.

Phương thức nhập và trường trong JavaScript

API JavaScript bao gồm phương thức append cho từng loại dữ liệu nhập:

JavaScript

this.appendEndRowInput()
    .appendField('for each')
    .appendField('item')
    .appendField(new Blockly.FieldVariable());
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 bổ sung có thể lấy một chuỗi giá trị nhận dạng mà trình tạo mã sử dụng. Giả và đầu vào hàng cuối hiếm khi cần tham chiếu và giá trị nhận dạng thường được để lại chưa đặt.

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

JavaScript

this.appendInput(new MyCustomInput('INPUT_NAME'))
    .appendField('an example label')

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

setCheck

JavaScript

input.setCheck('Number');

Hàm không bắt buộc này dùng để kiểm tra loại của các đầu vào được kết nối. Nếu được cung cấp đối số rỗng (null), mặc định, 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 loại để biết chi tiết.

setAlign

JavaScript

input.setAlign(Blockly.inputs.Align.RIGHT);

Hàm không bắt buộc này dùng để căn chỉnh các trường (xem bên dưới). Có ba các 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 thiết kế các khối cho RTL (tiếng Ả Rập và Do Thái), bên trái và bên phải được đảo ngược. Do đó, Blockly.inputs.Align.RIGHT sẽ căn chỉnh các trường sang trái.

appendField

Sau khi một mục đầu vào được tạo và nối thêm vào một khối có appendInput, một có thể tuỳ ý thêm số lượng trường bất kỳ vào dữ liệu đầ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 thông tin đầu vào.

JavaScript

input.appendField('hello');

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

Một hàng nhập dữ liệu có thể chứa số lượng phần tử trường bất kỳ. Nhiều appendField các lệnh gọi có thể được xâu chuỗi với nhau để thêm hiệu quả nhiều trường vào cùng một hàng nhập.

JavaScript

input.appendField('hello')
     .appendField(new Blockly.FieldLabel('Neil', 'person'));

Lệnh gọi appendField('hello') thực sự là một lối tắt để sử dụng Hàm khởi tạo FieldLabel: appendField(new Blockly.FieldLabel('hello')). Thời điểm duy nhất mà người dùng muốn sử dụng hàm khởi tạo là khi chỉ định tên lớp để văn bản có thể được tạo kiểu bằng quy tắc CSS.

Cùng dòng so với bên ngoài

Dữ liệu đầu vào dạng khối có thể hiển thị ở dạng bên ngoài hoặc nội bộ.

Định nghĩa khối có thể chỉ định một boolean tuỳ chọn kiểm soát việc giá trị đầu vào có cùng dòng hay không. Nếu là false thì mọi giá trị đầu vào đều sẽ là bên ngoài (chẳng hạn như khối bên trái). Nếu là true thì mọi giá trị đầu vào sẽ cùng dòng (chẳng hạn như khối bên phải ở trên).

JSON

{
  // ...,
  "inputsInline": true
}

JavaScript

init: function() {
  // ...
  this.setInputsInline(true);
}

Nếu không được xác định thì Blockly sẽ sử dụng một số phương pháp phỏng đoán để đoán chế độ nào là tốt nhất. Giả sử Blockly đưa ra lựa chọn đúng, không xác định trường này tốt hơn vì các bản dịch ngôn ngữ khác nhau có thể tự động có chế độ khác nhau. Xem ví dụ JSON của "set %1 to %2" (dữ liệu đầu vào bên ngoài) và "put %2 in %1" (đầu vào cùng dòng) trước đó trên trang này.

Sử dụng đầu vào cùng dòng khi một khối có khả năng có các đầu vào nhỏ như số. Người dùng có thể bật/tắt tuỳ chọn này thông qua trình đơn theo bối cảnh, nếu collapse cấu hình được bật (mặc định là true nếu hộp công cụ có danh mục).

Trường

Các trường xác định phần lớn các thành phần trên giao diện người dùng trong một khối. Các chính sách này bao gồm nhãn chuỗi, hình ảnh và dữ liệu đầu vào cho dữ liệu văn bản chẳng hạn như chuỗi và số. Ví dụ đơn giản nhất là khối math_number, Hàm này sử dụng field_input để cho phép người dùng nhập một số.

Các trường được nối vào khối bằng cách sử dụng appendField.

Blockly cung cấp một số trường tích hợp sẵn, bao gồm mục nhập văn bản, công cụ chọn màu, và hình ảnh. Bạn cũng có thể tạo các trường của riêng mình.

→ Thông tin khác về các trường tích hợp sẵn.

→ Thông tin khác về cách tạo trường tuỳ chỉnh.

Biểu tượng

Biểu tượng xác định các thành phần trên giao diện người dùng trên một khối hiển thị "meta" thông tin về chặn.

Các biểu tượng được thêm vào khối bằng addIcon.

Blockly cung cấp một số biểu tượng tích hợp sẵn, bao gồm cả biểu tượng bình luận và biểu tượng cảnh báo. Bạn cũng có thể tạo biểu tượng của riêng mình.

→ Thông tin khác về việc tạo biểu tượng tuỳ chỉnh.

Chú thích

Chú giải công cụ giúp trợ giúp tức thì khi người dùng di chuột qua khối. Nếu văn bản dài, văn bản đó sẽ tự động xuống dòng.

JSON

{
  // ...,
  "tooltip": "Tooltip text."
}

JavaScript

init: function() {
  this.setTooltip("Tooltip text.");
}

Trong API JavaScript, chú giải công cụ cũng có thể được định nghĩa là một hàm thay vì một chú giải công cụ chuỗi tĩnh. Thao tác này cho phép trợ giúp linh động. Hãy truy cập math_arithmetic để biết ví dụ về một chú thích thay đổi tuỳ thuộc vào tuỳ chọn thả xuống nào đã đã chọn.

JavaScript

Blockly.Blocks['math_arithmetic'] = {
  init: function() {
    // ...

    // Assign 'this' to a variable for use in the tooltip closure below.
    var thisBlock = this;
    this.setTooltip(function() {
      var mode = thisBlock.getFieldValue('OP');
      var TOOLTIPS = {
        'ADD': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_ADD,
        'MINUS': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_MINUS,
        'MULTIPLY': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_MULTIPLY,
        'DIVIDE': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_DIVIDE,
        'POWER': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_POWER
      };
      return TOOLTIPS[mode];
    });
  }
};

Khi sử dụng API JavaScript, các khối có thể chỉ định một hàm, thay vì một hàm tĩnh . Chuỗi này sẽ trả về chuỗi chú giải công cụ. Chế độ này cho phép hiển thị chú thích linh hoạt. Hãy xem math_arithmetic để biết ví dụ.

Tùy chỉnh theo yêu cầu

Bạn cũng có thể tuỳ chỉnh giao diện của các chú thích bằng cách cung cấp chế độ hiển thị tuỳ chỉnh . Tạo một hàm chấp nhận hai tham số:

  • trước tiên là phần tử <div> mà bạn sẽ kết xuất nội dung
  • thứ hai là phần tử thực tế được di chuột qua và bạn sẽ hiển thị chú thích cho

Trong phần nội dung của hàm, bạn có thể kết xuất bất kỳ nội dung nào mình muốn vào trong div. Để xem chuỗi chú thích được xác định trên khối mà bạn di chuột qua, bạn có thể gọi Blockly.Tooltip.getTooltipOfObject(element);, trong đó element là tham số thứ hai ở trên.

Cuối cùng, hãy đăng ký hàm này để Blockly có thể gọi vào thời điểm thích hợp:

Blockly.Tooltip.setCustomTooltip(yourFnHere);

Để biết ví dụ, hãy xem Bản minh hoạ chú thích tuỳ chỉnh.

URL trợ giúp

Ứng dụng Chặn có thể có một trang trợ giúp liên kết với các ứng dụng đó. Tính năng này dành cho người dùng Blockly cho Web bằng cách nhấp chuột phải vào khối và chọn "Help" (Trợ giúp) từ trình đơn theo bối cảnh. Nếu giá trị này là null thì trình đơn sẽ có màu xám bị loại.

JSON

{
  // ...,
  "helpUrl": "https://en.wikipedia.org/wiki/For_loop"
}

JavaScript

init: function() {
  // ...
  this.setHelpUrl('https://en.wikipedia.org/wiki/For_loop');
}

Khi sử dụng API JavaScript, các khối có thể chỉ định một hàm, thay vì một hàm tĩnh , hàm này sẽ trả về một chuỗi URL, do đó cho phép trợ giúp động.

Thay đổi trình nghe và trình xác thực

Các khối có thể có các hàm trình nghe thay đổi được gọi khi có bất kỳ thay đổi nào đối với không gian làm việc (bao gồm cả những không gian làm việc không liên quan đến bị chặn). Các đường liên kết này chủ yếu được dùng để đặt văn bản cảnh báo của khối hoặc thông báo người dùng tương tự bên ngoài Workspace.

Hàm này được thêm bằng cách gọi setOnChange bằng một hàm và có thể thực hiện được trong quá trình bắt đầu hoặc thông qua tiện ích JSON nếu bạn định sử dụng trên tất cả các nền tảng.

JSON

{
  // ...,
  "extensions":["warning_on_change"],
}

Blockly.Extensions.register('warning_on_change', function() {
  // Example validation upon block change:
  this.setOnChange(function(changeEvent) {
    if (this.getInput('NUM').connection.targetBlock()) {
      this.setWarningText(null);
    } else {
      this.setWarningText('Must have an input block.');
    }
  });
});

JavaScript

Blockly.Blocks['block_type'] = {
  init: function() {
    // Example validation upon block change:
    this.setOnChange(function(changeEvent) {
      if (this.getInput('NUM').connection.targetBlock()) {
        this.setWarningText(null);
      } else {
        this.setWarningText('Must have an input block.');
      }
    });
  }
}

Hệ thống gọi hàm, truyền vào sự kiện thay đổi. Bên trong hàm này, this tham chiếu đến thực thể của khối.

Vì hàm này được gọi khi có bất kỳ thay đổi nào, nên nếu được sử dụng, nhà phát triển phải đảm bảo trình nghe chạy nhanh chóng. Người dùng cũng nên cảnh giác với những thay đổi đối với không gian làm việc có thể phân tầng hoặc lặp lại cho trình nghe.

Hãy xem controls_flow_statements, logic_compare và procedures_ifreturn để có ví dụ.

Lưu ý rằng các trường có thể chỉnh sửa có trình nghe sự kiện riêng để xác thực dữ liệu đầu vào và gây ra tác dụng phụ.

Biến thể

Đột biến cho phép các khối nâng cao thay đổi hình dạng, đáng chú ý nhất là kết quả của người dùng mở hộp thoại để thêm, xoá hoặc sắp xếp lại các thành phần. Biến thể có thể được thêm qua JSON bằng khoá mutator.

JSON

{
  // ...,
  "mutator":"if_else_mutator"
}

Cấu hình mỗi khối

Các thực thể khối có một số thuộc tính định cấu hình cách chúng hoạt động người dùng. Bạn có thể dùng các quy tắc này để ràng buộc không gian làm việc phản ánh một số các thuộc tính của miền (ví dụ: chỉ có chính xác một sự kiện "bắt đầu") hoặc tiêu điểm công sức của người dùng (ví dụ: hướng dẫn).

Trạng thái có thể xoá

block.setDeletable(false);

Khi bạn đặt chính sách này thành false, người dùng sẽ không thể xoá khối. Chế độ chặn mặc định có thể xoá trên không gian làm việc có thể chỉnh sửa.

Bất kỳ khối nào, (kể cả khối không thể xoá) đều có thể bị xoá theo phương thức lập trình:

block.dispose();

Trạng thái có thể chỉnh sửa

block.setEditable(false);

Khi bạn đặt chính sách này thành false, người dùng sẽ không thể thay đổi các trường của khối (ví dụ: trình đơn thả xuống và mục nhập văn bản). Chặn theo mặc định là có thể chỉnh sửa trên trang có thể chỉnh sửa Workspace.

Trạng thái có thể di chuyển

block.setMovable(false);

Khi bạn đặt chính sách này thành false, người dùng sẽ không thể trực tiếp di chuyển khối. Một khối bất động là phần tử con của một khối khác không thể ngắt kết nối với khối đó, mặc dù khối này sẽ di chuyển cùng với phần tử mẹ nếu thành phần mẹ được di chuyển. Cản phá theo mặc định là có thể di chuyển trên không gian làm việc có thể chỉnh sửa.

Bất kỳ khối nào (ngay cả khối bất động sản) cũng có thể được di chuyển theo phương thức lập trình sau khi khối đó nằm trên Workspace.

block.moveBy(dx, dy)

Vị trí bắt đầu của một khối trên không gian làm việc mặc định là (0, 0).

Chặn dữ liệu

this.data = '16dcb3a4-bd39-11e4-8dfc-aa07a5b093db';

Dữ liệu là một chuỗi không bắt buộc và tuỳ ý được đính kèm vào khối. Khi được chuyển đổi tuần tự thì chuỗi dữ liệu được chuyển đổi tuần tự với khối đó. Điều này bao gồm khi khối được sao chép hoặc sao chép/dán.

Thông thường, thuộc tính này được dùng để liên kết một khối với một tài nguyên bên ngoài.

Khi được chuyển đổi tuần tự sang JSON, dữ liệu sẽ được lưu trữ dưới dạng thuộc tính cấp cao nhất trong khối:

{
  "type": "my_block",
  "data": "16dcb3a4-bd39-11e4-8dfc-aa07a5b093db",
  // etc..
}

Khi được chuyển đổi tuần tự sang XML (hệ thống tuần tự đóng hộp băng cũ), chuỗi dữ liệu được lưu trữ trong thẻ <data></data> bên trong khối:

<block type="my_block">
  <data>16dcb3a4-bd39-11e4-8dfc-aa07a5b093db</data>
  <!-- etc... -->
</block>

Phá huỷ

Các quy tắc chặn có một hook destroy, được gọi khi chúng bị xoá khỏi Workspace. Bạn có thể dùng thao tác này để huỷ mọi mô hình dữ liệu sao lưu/bên ngoài tài nguyên được liên kết với khối không còn cần thiết nữa.

JSON

{
  // ...,
  "extensions":["destroy"],
}

Blockly.Extensions.registerMixin('destroy', {
  destroy: function() {
    this.myResource.dispose();
  }
});

JavaScript

Blockly.Blocks['block_type'] = {
  destroy: function() {
    this.myResource.dispose();
  }
}

Phương thức destroy được gọi sau khi phần tử mẹ của khối đã được loại bỏ, nhưng trước khi tiêu huỷ bất kỳ phần tử con hoặc trường nào.

Trình đơn ngữ cảnh

Theo mặc định, các khối có trình đơn theo bối cảnh nhấp chuột phải cho phép người dùng thực hiện như thêm nhận xét hoặc chặn trùng lặp.

Bạn có thể tắt trình đơn theo bối cảnh của từng khối bằng cách thực hiện:

block.contextMenu = false;

Bạn cũng có thể tuỳ chỉnh các lựa chọn xuất hiện trong trình đơn. Để tuỳ chỉnh trình đơn cho tất cả các quy tắc chặn, hãy tham khảo tài liệu về trình đơn theo bối cảnh. Để tuỳ chỉnh trình đơn cho từng khối, bạn có thể triển khai customContextMenu. Hàm này lấy một mảng các tuỳ chọn trên trình đơn và sửa đổi mục đó tại chỗ, tức là bạn có thể thêm và xoá các mục.

Mỗi lựa chọn trong trình đơn là một đối tượng có 3 thuộc tính:

  • text là văn bản hiển thị.
  • enabled là một giá trị boolean. Khi tắt, lựa chọn này vẫn xuất hiện nhưng có màu xám .
  • callback là hàm sẽ được gọi khi người dùng nhấp vào lựa chọn này.