ภาพรวมเกี่ยวกับบล็อกที่กำหนดเอง

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

หากต้องการกำหนดและใช้บล็อกประเภทใหม่ คุณต้องมีสิ่งต่อไปนี้

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

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

คําจํากัดความของบล็อกจะกําหนดลักษณะของบล็อก เช่น ข้อความ ช่อง การเชื่อมต่อ และสี นอกจากนี้ยังกำหนดลักษณะการทํางานเฉพาะบล็อกได้ด้วย เช่น ตัวแฮนเดิลเหตุการณ์เฉพาะบล็อก เช่น บล็อกนี้

สามารถกําหนดได้ใน JSON หรือ JavaScript ดังนี้

JSON

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับคำจำกัดความของบล็อกและวิธีการทำงานของคำจำกัดความได้ที่คำจำกัดความของบล็อกคืออะไร

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

หากต้องการเปลี่ยนบล็อกเป็นโค้ด คุณต้องมีฟังก์ชัน Generator แยกกันสำหรับแต่ละภาษาที่ต้องการสร้าง ตัวอย่างเช่น นี่เป็นเครื่องมือสร้างที่สร้างขึ้นจาก JavaScript

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

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

ดูข้อมูลเพิ่มเติมได้ที่เครื่องมือสร้าง

ข้อมูลอ้างอิงเกี่ยวกับกล่องเครื่องมือ

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

JSON

var toolbox = {
     "kind": "categoryToolbox",
     "name": "Text"
     "contents": [
       {
         "kind": "block",
         "type": "string_length"
       },
     ]
   };

XML

<xml id="toolbox" style="display: none"> WHY IS THERE DISPLAY: NONE HERE?
   <category name="Text">
     <block type="string_length"></block>
   </category>
   ...
</xml>

ดูข้อมูลเพิ่มเติมได้ที่กำหนดกล่องเครื่องมือแบบป๊อปอัปหรือกำหนดกล่องเครื่องมือหมวดหมู่