แม้ว่า Blockly จะกำหนดจำนวนบล็อกมาตรฐาน แต่แอปพลิเคชันส่วนใหญ่ก็ต้องกำหนดและใช้การบล็อกที่เกี่ยวข้องกับโดเมนอย่างน้อย 2-3 รายการ
บล็อกประกอบด้วยองค์ประกอบ 3 อย่าง ได้แก่
- ออบเจ็กต์คำจำกัดความบล็อก: กำหนดลักษณะและลักษณะการทำงานของบล็อก ซึ่งรวมถึงข้อความ สี ช่อง และเส้นเชื่อมต่อ
- การอ้างอิงกล่องเครื่องมือ: การอ้างอิงประเภทการบล็อกใน XML ของกล่องเครื่องมือเพื่อให้ผู้ใช้เพิ่มการบล็อกลงในพื้นที่ทำงานได้
- ฟังก์ชันเครื่องมือสร้าง: สร้างสตริงโค้ดสำหรับบล็อกนี้ ซึ่งจะเขียนด้วย JavaScript เสมอ แม้ว่าภาษาเป้าหมายจะไม่ใช่ JavaScript ก็ตาม
คำจำกัดความของบล็อก
การบล็อกสำหรับการโหลดเว็บ การบล็อกผ่านไฟล์สคริปต์ ไดเรกทอรี blocks/
มีตัวอย่างดังกล่าวมากมายสำหรับบล็อกมาตรฐาน สมมติว่าบล็อกของคุณไม่พอดีกับหมวดหมู่ที่มีอยู่ ให้สร้างไฟล์ JavaScript ใหม่ ไฟล์ JavaScript ใหม่นี้ต้องรวมอยู่ในรายการแท็ก <script ...>
ในไฟล์ HTML ของตัวแก้ไข
คำจำกัดความของบล็อกโดยทั่วไปมีลักษณะดังนี้
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];
};
ฟังก์ชันเครื่องมือสร้างจะใช้การอ้างอิงไปยังการบล็อกเพื่อการประมวลผล โดยจะแสดงผลอินพุต (อินพุต VALUE
ด้านบน) เป็นสตริงโค้ด แล้วนําอินพุตเหล่านั้นมาต่อกันเป็นนิพจน์ขนาดใหญ่ขึ้น
→ ข้อมูลเพิ่มเติมเกี่ยวกับเครื่องมือสร้างโค้ดบล็อก...