เพิ่มการบล็อกที่กําหนดเอง

แม้ว่า Blockly จะกำหนดจำนวนบล็อกมาตรฐาน แต่แอปพลิเคชันส่วนใหญ่ต้อง กำหนดและใช้การบล็อกที่เกี่ยวข้องกับโดเมนอย่างน้อย 2-3 รายการ

บล็อกประกอบด้วยองค์ประกอบ 3 อย่าง ได้แก่

• ออบเจ็กต์คําจํากัดความของบล็อก: กําหนดลักษณะและลักษณะการทํางานของบล็อก ซึ่งรวมถึงข้อความ สี ช่อง และการเชื่อมต่อ
• การอ้างอิงกล่องเครื่องมือ: การอ้างอิงประเภทการบล็อกใน XML ของกล่องเครื่องมือ เพื่อให้ผู้ใช้ เพิ่มลงในพื้นที่ทำงานได้
• ฟังก์ชัน Generator: สร้างสตริงโค้ดสําหรับบล็อกนี้ ข้อความจะเขียนด้วย JavaScript เสมอ แม้ว่าภาษาเป้าหมายจะไม่ใช่ JavaScript ก็ตาม

คําจํากัดความของบล็อก

Blockly สำหรับเว็บจะโหลดบล็อกผ่านไฟล์สคริปต์ ไดเรกทอรี blocks/ มีตัวอย่างหลายรายการสำหรับการบล็อกมาตรฐาน สมมติว่าบล็อกของคุณ ไม่อยู่ในหมวดหมู่ที่มีอยู่ ให้สร้างไฟล์ JavaScript ใหม่ ไฟล์ JavaScript ใหม่นี้ต้องรวมอยู่ในรายการแท็ก <script ...> ในไฟล์ HTML ของผู้แก้ไข

หมายเหตุ: การบล็อกส่วนใหญ่สามารถกำหนดได้โดยใช้ เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Blockly แทนที่จะเป็น สร้างโค้ดด้านล่างด้วยตัวเอง

การกําหนดค่าบล็อกทั่วไปมีลักษณะดังนี้

JSON

Blockly.Blocks['string_length'] = {
  init: function() {
    this.jsonInit({
      "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');
  }
};

• string_length: นี่คือชื่อประเภทของบล็อก เนื่องจากบล็อกทั้งหมดใช้เนมสเปซเดียวกัน คุณจึงควรใช้ชื่อที่ประกอบด้วยหมวดหมู่ (ในกรณีนี้คือ string) ตามด้วยฟังก์ชันของบล็อก (ในกรณีนี้คือ length)

• init: ฟังก์ชันนี้จะกำหนดรูปลักษณ์ของบล็อก

ซึ่งจะกําหนดบล็อกต่อไปนี้

ดูรายละเอียดคำจำกัดความของบล็อกได้ในกำหนดบล็อก

อาร์เรย์ JSON

คุณกําหนดบล็อกหลายรายการพร้อมกันได้โดยใช้อาร์เรย์ของคําจํากัดความบล็อก JSON

JSON

Blockly.defineBlocksWithJsonArray([
  // Block for colour picker.
  {
    "type": "colour_picker",
    "message0": "%1",
    "args0": [
      {
        "type": "field_colour",
        "name": "COLOUR",
        "colour": "#ff0000"
      }
    ],
    "output": "Colour",
    "helpUrl": "%{BKY_COLOUR_PICKER_HELPURL}",
    "style": "colour_blocks",
    "tooltip": "%{BKY_COLOUR_PICKER_TOOLTIP}",
    "extensions": ["parent_tooltip_when_inline"]
  },
  // Block for random colour.
  {
    "type": "colour_random",
    "message0": "%{BKY_COLOUR_RANDOM_TITLE}",
    "output": "Colour",
    "helpUrl": "%{BKY_COLOUR_RANDOM_HELPURL}",
    "style": "colour_blocks",
    "tooltip": "%{BKY_COLOUR_RANDOM_TOOLTIP}"
  }
]);

เพิ่มการอ้างอิงกล่องเครื่องมือ

เมื่อกําหนดแล้ว ให้ใช้ชื่อประเภทเพื่ออ้างอิงบล็อกไปยังกล่องเครื่องมือ

<xml id="toolbox" style="display: none">
  <category name="Text">
    <block type="string_length"></block>
  </category>
  ...
</xml>

ดูรายละเอียดเพิ่มเติมได้ที่คู่มือกล่องเครื่องมือ

เพิ่มเครื่องมือสร้างโค้ดบล็อก

สุดท้าย ในการแปลงบล็อกเป็นโค้ด ให้จับคู่บล็อกนั้นกับเครื่องมือสร้าง เครื่องมือสร้างจะเจาะจงสำหรับภาษาเอาต์พุตที่ต้องการ แต่โดยทั่วไปเครื่องมือสร้างมาตรฐานจะมีรูปแบบดังต่อไปนี้

javascriptGenerator.forBlock['text_length'] = function(block, generator) {
  // String or array length.
  var argument0 = generator.valueToCode(block, 'VALUE', Order.FUNCTION_CALL) || '\'\'';
  return [argument0 + '.length', Order.MEMBER];
};

ฟังก์ชัน Generator จะอ้างอิงบล็อกเพื่อประมวลผล ทั้งนี้ แสดงผลอินพุต (อินพุต VALUE ด้านบน) เป็นสตริงโค้ด จากนั้น เชื่อมโยงสิ่งเหล่านั้นเข้าด้วยกันเป็นนิพจน์ที่ใหญ่กว่า

→ ข้อมูลเพิ่มเติมเกี่ยวกับเครื่องมือสร้างโค้ดบล็อก...