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');
}
};
ब्लॉक की परिभाषाओं और उनके काम करने के तरीके के बारे में ज़्यादा जानने के लिए, ब्लॉक की परिभाषा क्या है? लेख पढ़ें.
ब्लॉक-कोड जनरेटर
किसी ब्लॉक को कोड में बदलने के लिए, आपको हर उस भाषा के लिए अलग-अलग जनरेटर फ़ंक्शन की ज़रूरत होती है जिसे जनरेट करना है. उदाहरण के लिए, यहां एक जनरेटर दिया गया है जो 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];
};
जनरेटर फ़ंक्शन, प्रोसेस किए जा रहे ब्लॉक और भाषा जनरेटर को स्वीकार करता है. यह इनपुट (जैसे, उदाहरण में 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>
ज़्यादा जानकारी के लिए, फ़्लाईआउट टूलबॉक्स तय करना या कैटगरी टूलबॉक्स तय करना लेख पढ़ें.