ब्लॉक की परिभाषाएं बताती हैं कि ब्लॉक कैसा दिखता है और कैसे काम करता है. इनमें टेक्स्ट, रंग, आकार, और इसे किन दूसरे ब्लॉक से कनेक्ट किया जा सकता है, जैसी चीज़ें शामिल होती हैं.
JSON फ़ॉर्मैट और JavaScript API की तुलना
ब्लॉकली में ब्लॉक तय करने के दो तरीके हैं: JSON ऑब्जेक्ट और JavaScript फ़ंक्शन. अलग-अलग शब्दों के क्रम वाली भाषाओं के लिए डेवलप करते समय, JSON फ़ॉर्मैट को स्थानीय भाषा के अनुसार प्रोसेस को आसान बनाने के लिए डिज़ाइन किया गया है. JSON फ़ॉर्मैट, ब्लॉक तय करने का पसंदीदा तरीका है.
हालांकि, JSON फ़ॉर्मैट सीधे तौर पर बेहतर सुविधाओं, जैसे कि म्यूटेटर या पुष्टि करने वाले प्रोग्राम के बारे में नहीं बता पाता है. इन्हें JavaScript में लिखा जाना चाहिए. आम तौर पर, इन्हें एक्सटेंशन के तौर पर लिखा जाना चाहिए.
ब्लॉकली के मूल JavaScript लागू करने वाले ऐप्लिकेशन का इस्तेमाल करने वाले ऐप्लिकेशन, ब्लॉक की परिभाषाएं सीधे ब्लॉकली एपीआई फ़ंक्शन कॉल के निचले स्तर पर लिख सकते हैं. इन्हें नीचे दिए गए अलग-अलग JavaScript के उदाहरणों में दिखाया गया है.
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');
}
};
init फ़ंक्शन ब्लॉक का आकार बनाता है. इस फ़ंक्शन के संदर्भ में, कीवर्ड this वह असल ब्लॉक है जिसे बनाया जा रहा है.
दोनों उदाहरण एक ही 'string_length' ब्लॉक को लोड करते हैं.
वेब पर, JSON फ़ॉर्मैट को initJson फ़ंक्शन का इस्तेमाल करके लोड किया जाता है.
इससे ब्लॉकली वेबपेजों में, दोनों फ़ॉर्मैट को मिक्स करने की सुविधा भी मिलती है. जहां भी मुमकिन हो, अपने ब्लॉक को JSON के साथ सेट करना बेहतर होगा. ब्लॉक की गई परिभाषाओं के सिर्फ़ उन हिस्सों के लिए JavaScript का इस्तेमाल करें जो JSON फ़ॉर्मैट में काम नहीं करते.
नीचे एक ब्लॉक का उदाहरण दिया गया है, जिसे मुख्य रूप से JSON का इस्तेमाल करके तय किया गया है. हालांकि, डाइनैमिक टूलटिप दिखाने के लिए, JavaScript API का इस्तेमाल करके इसे बढ़ाया गया है.
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'));
});
}
};
ब्लॉक का रंग
ब्लॉक का मुख्य रंग JSON colour प्रॉपर्टी, block.setColour(..) फ़ंक्शन या थीम का इस्तेमाल करके और ब्लॉक स्टाइल से तय किया जाता है.
JSON
{
// ...,
"colour": 160,
}
JavaScript
init: function() {
// ...
this.setColour(160);
}
ज़्यादा जानकारी के लिए, ब्लॉक कलर करने से जुड़ी गाइड देखें.
स्टेटमेंट कनेक्शन
nextStatement और
previousStatement कनेक्टर का इस्तेमाल करके, उपयोगकर्ता ब्लॉक का क्रम बना सकते हैं. ब्लॉकली के स्टैंडर्ड लेआउट में, ये कनेक्शन ऊपर और नीचे होते हैं. साथ ही, ब्लॉक वर्टिकल रूप से स्टैक किए गए होते हैं.
पिछले कनेक्टर वाले ब्लॉक में, आउटपुट कनेक्टर नहीं हो सकता. इसी तरह, पिछले कनेक्टर वाले ब्लॉक में आउटपुट कनेक्टर नहीं हो सकता. स्टेटमेंट ब्लॉक शब्द का मतलब ऐसे ब्लॉक से है जिसका कोई वैल्यू आउटपुट नहीं होता. आम तौर पर, स्टेटमेंट ब्लॉक में पिछला कनेक्शन और अगला कनेक्शन, दोनों होता है.
nextStatement और previousStatement कनेक्शन टाइप किए जा सकते हैं, लेकिन स्टैंडर्ड ब्लॉक में इस सुविधा का इस्तेमाल नहीं किया जाता.
अगला कनेक्शन
ब्लॉक के नीचे एक पॉइंट बनाता है, ताकि अन्य स्टेटमेंट इसके नीचे स्टैक किए जा सकें. अगले कनेक्शन वाला ब्लॉक, लेकिन पहले से कोई कनेक्शन नहीं होता. आम तौर पर, यह किसी इवेंट को दिखाता है. इसे हैट की मदद से रेंडर करने के लिए कॉन्फ़िगर किया जा सकता है.
JSON
टाइप नहीं किया गया:
{
...,
"nextStatement": null,
}
टाइप किया गया (बहुत कम):
{
"nextStatement": "Action",
...
}
JavaScript
टाइप नहीं किया गया:
this.setNextStatement(true); // false implies no next connector, the default
टाइप किया गया (बहुत कम):
this.setNextStatement(true, 'Action');
पिछला कनेक्शन
ब्लॉक के सबसे ऊपर एक नॉच बनाता है, ताकि उसे स्टेटमेंट के स्टैक के तौर पर जोड़ा जा सके.
पिछले कनेक्शन वाले ब्लॉक में आउटपुट कनेक्शन नहीं हो सकता.
JSON
टाइप नहीं किया गया:
{
...,
"previousStatement": null,
}
टाइप किया गया (बहुत कम):
{
"previousStatement": "Action",
...
}
JavaScript
टाइप नहीं किया गया:
this.setPreviousStatement(true); // false implies no previous connector, the default
टाइप किया गया (बहुत कम):
this.setPreviousStatement(true, 'Action');
आउटपुट ब्लॉक करें
एक ब्लॉक में एक आउटपुट हो सकता है, जिसे शुरुआत के किनारे पर पुरुष जिगसॉ कनेक्टर के रूप में दिखाया जाता है. आउटपुट, वैल्यू इनपुट से कनेक्ट होते हैं. आउटपुट वाले ब्लॉक को आम तौर पर वैल्यू ब्लॉक कहा जाता है.
JSON
टाइप नहीं किया गया:
{
// ...,
"output": null,
}
टाइप किया गया:
{
// ...,
"output": "Number",
}
JavaScript
टाइप नहीं किया गया:
init: function() {
// ...
this.setOutput(true);
}
टाइप किया गया:
init: function() {
// ...
this.setOutput(true, 'Number');
}
आउटपुट कनेक्टर वाले ब्लॉक में, पिछला स्टेटमेंट नॉच भी नहीं हो सकता.
इनपुट ब्लॉक करें
किसी ब्लॉक में एक या इससे ज़्यादा इनपुट होते हैं. हर इनपुट में फ़ील्ड का क्रम होता है और यह किसी कनेक्शन पर खत्म हो सकता है. इसमें कई तरह के बिल्ट-इन इनपुट होते हैं.
- वैल्यू इनपुट: यह वैल्यू ब्लॉक के आउटपुट कनेक्शन से कनेक्ट करता है.
math_arithmeticब्लॉक (जोड़, घटाना या बढ़ाना) दो वैल्यू इनपुट वाले ब्लॉक का एक उदाहरण है. - स्टेटमेंट इनपुट: यह स्टेटमेंट ब्लॉक के पिछले कनेक्शन से कनेक्ट करता है. 'टाइम लूप' का नेस्ट किया गया सेक्शन, स्टेटमेंट इनपुट का एक उदाहरण है.
- डमी इनपुट: इसमें ब्लॉक कनेक्शन नहीं होता. जब ब्लॉक को बाहरी वैल्यू इनपुट का इस्तेमाल करने के लिए कॉन्फ़िगर किया जाता है, तब नई लाइन की तरह काम करता है.
- आखिरी पंक्ति का इनपुट: इसमें ब्लॉक कनेक्शन नहीं होता और यह हमेशा नई लाइन की तरह काम करता है.
कस्टम रेंडरिंग की सुविधा देने के लिए, पसंद के मुताबिक इनपुट भी बनाया जा सकता है.
JSON फ़ॉर्मैट और JavaScript API, अपने इनपुट की जानकारी देने के लिए थोड़े अलग मॉडल का इस्तेमाल करते हैं.
JSON में इनपुट और फ़ील्ड
JSON के तय किए गए ब्लॉक, इंटरपोलेशन वाली मैसेज स्ट्रिंग ( message0, message1, ...) के क्रम के तौर पर स्ट्रक्चर्ड किए जाते हैं. इनमें हर इंटरपोलेशन टोकन (%1, %2, ...) एक फ़ील्ड या इनपुट का आखिरी हिस्सा होता है. इसका मतलब है कि मेल खाने वाली JSON argsN कलेक्शन में, इनपुट कनेक्टर मैसेज के अंदर रेंडर होता है. इस फ़ॉर्मैट का मकसद
अंतरराष्ट्रीय दर्शकों के लिए आसान बनाना है.
JSON
{
"message0": "set %1 to %2",
"args0": [
{
"type": "field_variable",
"name": "VAR",
"variable": "item",
"variableTypes": [""]
},
{
"type": "input_value",
"name": "VALUE"
}
]
}
इंटरपोलेशन टोकन को args0 ऐरे से पूरी तरह मेल खाना चाहिए: कोई डुप्लीकेट नहीं,
कोई चूक नहीं. टोकन किसी भी क्रम में मौजूद हो सकते हैं. इससे अलग-अलग भाषाओं को ब्लॉक का लेआउट बदलने में मदद मिलती है.
इंटरपोलेशन टोकन के दोनों ओर मौजूद टेक्स्ट में काट-छांट की गई है.
% वर्ण (जैसे, प्रतिशत के बारे में बताते समय) का इस्तेमाल करने वाले टेक्स्ट में
%% का इस्तेमाल होना चाहिए, ताकि इसे इंटरपोलेशन टोकन के तौर पर न समझा जाए.
तर्कों का क्रम और अलग-अलग तरह के तर्क, ब्लॉक का आकार तय करते हैं. इनमें से किसी एक स्ट्रिंग को बदलने से ब्लॉक का लेआउट पूरी तरह से बदल सकता है.
यह उन भाषाओं के लिए खास तौर पर ज़रूरी है जिनके शब्दों का क्रम अंग्रेज़ी से अलग होता है. एक ऐसी काल्पनिक भाषा पर ध्यान दें जिसमें "put %2 in %1" कहने के लिए, "set %1 to %2" (जैसा कि
ऊपर दिए गए उदाहरण में इस्तेमाल किया गया है) को उलटा करना ज़रूरी है. इस एक स्ट्रिंग को बदलने (और JSON के बाकी एलिमेंट को बिना छेड़छाड़ किए) में बदलाव करने से यह ब्लॉक हो जाएगा:
ब्लॉकली ने अपने-आप फ़ील्ड का क्रम बदल दिया, एक डमी इनपुट बनाया, और बाहरी इनपुट से इंटरनल इनपुट पर स्विच किया.
ब्लॉक रूप से, मैसेज स्ट्रिंग में मौजूद किसी भी न्यूलाइन वर्ण (\n) को, एंड-रो इनपुट से अपने-आप बदल देता है.
JSON
{
"message0": "set %1\nto %2",
"args0": [
{
"type": "field_variable",
"name": "VAR",
"variable": "item",
"variableTypes": [""]
},
{
"type": "input_value",
"name": "VALUE"
}
]
}
आर्ग्स
हर मैसेज स्ट्रिंग, उसी नंबर की args कलेक्शन से जुड़ी होती है. उदाहरण
के लिए, message0, args0 के साथ आता है. इंटरपोलेशन टोकन
(%1, %2, ...) args कलेक्शन के आइटम दिखाते हैं. हर ऑब्जेक्ट की एक
type स्ट्रिंग होती है. बाकी पैरामीटर टाइप के आधार पर बदलते हैं:
अपने खुद के कस्टम फ़ील्ड और कस्टम इनपुट भी तय किए जा सकते हैं और उन्हें आर्ग्युमेंट के तौर पर पास किया जा सकता है.
हर ऑब्जेक्ट में एक alt फ़ील्ड भी हो सकता है. अगर ब्लॉकली, ऑब्जेक्ट के type को नहीं पहचान पाता है, तो उसकी जगह पर alt ऑब्जेक्ट का इस्तेमाल किया जाता है. उदाहरण के लिए, अगर field_time नाम का नया फ़ील्ड ब्लॉकली में जोड़ा जाता है, तो इस फ़ील्ड का इस्तेमाल करने वाले ब्लॉक करने से, Blockly के पुराने वर्शन के लिए field_input फ़ॉलबैक तय करने के लिए, alt का इस्तेमाल किया जा सकता है:
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"
}
}
]
}
किसी alt ऑब्जेक्ट का अपना alt ऑब्जेक्ट हो सकता है. इसलिए, यह ऑब्जेक्ट को चेन में जोड़ने की अनुमति देता है.
अगर किसी alt ऑब्जेक्ट को देखने के बाद, Blockly, args0 कलेक्शन में कोई ऑब्जेक्ट नहीं बना पाता, तो उस ऑब्जेक्ट को स्किप कर दिया जाता है.
अगर message स्ट्रिंग के आखिर में टेक्स्ट या ऐसे फ़ील्ड होते हैं जो किसी इनपुट में शामिल नहीं हैं, तो ब्लॉक के आखिर में एक डमी इनपुट अपने-आप जुड़ जाएगा.
इसलिए, अगर किसी ब्लॉक का आखिरी इनपुट एक डमी इनपुट है, तो उसे args कलेक्शन से हटाया जा सकता है. साथ ही, इसे message में इंटरपोलेशन की ज़रूरत नहीं होती. टेलिंग डमी इनपुट के अपने-आप जुड़ने से, अनुवाद करने वाले व्यक्ति
message को बदल सकते हैं. इसके लिए, उन्हें JSON के बाकी हिस्से में बदलाव करने की ज़रूरत नहीं पड़ती. इस पेज पर इससे पहले "set %1 to %2" (कोई डमी इनपुट नहीं) और "put %2 in %1" (डमी इनपुट जोड़ा गया) का उदाहरण देखें.
implicitAlign0
बहुत कम मामलों में, अपने-आप बने ट्रेलिंग डमी इनपुट को "RIGHT" या "CENTRE" के मुताबिक होना चाहिए. अगर कोई वैल्यू तय नहीं की गई है, तो डिफ़ॉल्ट वैल्यू "LEFT" होती है.
नीचे दिए गए उदाहरण में, message0 "send email to %1 subject %2 secure %3" है और Blockly, तीसरी लाइन के लिए अपने-आप डमी इनपुट जोड़ता है. implicitAlign0 को "RIGHT" पर सेट करने से, यह पंक्ति दाईं ओर अलाइन हो जाती है. यह अलाइनमेंट उन सभी इनपुट पर लागू होता है जिन्हें JSON ब्लॉक की परिभाषा में साफ़ तौर पर नहीं बताया गया है. इसमें मैसेज में नई लाइन के वर्णों ('\n') को बदलने वाले आखिरी पंक्ति के इनपुट भी शामिल हैं. एक ऐसी प्रॉपर्टी lastDummyAlign0 भी है जो अब काम नहीं करती है और जिसका व्यवहार implicitAlign0 जैसा है.
RTL (अरबी और हिब्रू) के लिए ब्लॉक डिज़ाइन करते समय, बाएं और दाएं ब्लॉक किए जाते हैं.
इसलिए, "RIGHT" फ़ील्ड को बाईं ओर अलाइन करेगा.
message1, args1, implicitAlign1
कुछ ब्लॉक स्वाभाविक रूप से दो या दो से ज़्यादा अलग-अलग हिस्सों में बंटे होते हैं. इस दोहराए जाने वाले ब्लॉक पर विचार करें जिसमें दो पंक्तियां हैं:
अगर इस ब्लॉक की जानकारी एक मैसेज से दी गई होती, तो message0 प्रॉपर्टी
"repeat %1 times %2 do %3" होगी. यह स्ट्रिंग अनुवादक के लिए मुश्किल है, इसलिए
यह बताना मुश्किल है कि %2 प्रतिस्थापन का क्या मतलब है. कुछ भाषाओं में %2 डमी इनपुट भी शायद काम न करे. साथ ही, ऐसे कई ब्लॉक हो सकते हैं
जो दूसरी पंक्ति का टेक्स्ट शेयर करना चाहते हैं. JSON के लिए एक से ज़्यादा मैसेज और आर्ग्युमेंट प्रॉपर्टी का इस्तेमाल करना बेहतर तरीका है:
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
}
message, args, और implicitAlign प्रॉपर्टी की कोई भी संख्या, JSON फ़ॉर्मैट में बताई जा सकती है. यह 0 से शुरू होती है और एक क्रम में बढ़ती जाती है. ध्यान दें कि ब्लॉक फ़ैक्ट्री, मैसेज को एक से ज़्यादा हिस्सों में नहीं बांट सकता. हालांकि, मैन्युअल तरीके से ऐसा करना आसान है.
JavaScript में इनपुट और फ़ील्ड
JavaScript API में, हर तरह के इनपुट के लिए एक append तरीका शामिल होता है:
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');
अपेंड करने का हर तरीका एक आइडेंटिफ़ायर स्ट्रिंग ले सकता है. इसका इस्तेमाल कोड जनरेटर करते हैं. डमी और आखिरी पंक्ति के इनपुट की ज़रूरत कभी-कभी ही होती है और पहचानकर्ता आम तौर पर सेट नहीं रहता.
JavaScript API में कस्टम इनपुट जोड़ने के लिए, एक सामान्य appendInput तरीका भी शामिल होता है. ध्यान दें कि इस मामले में, आइडेंटिफ़ायर को सीधे आपके कस्टम इनपुट के कंस्ट्रक्टर को पास किया जाना चाहिए.
JavaScript
this.appendInput(new MyCustomInput('INPUT_NAME'))
.appendField('an example label')
सभी appendInput तरीके (सामान्य और सामान्य, दोनों) इनपुट ऑब्जेक्ट देते हैं, ताकि उन्हें मेथड चेन का इस्तेमाल करके और कॉन्फ़िगर किया जा सके. इनपुट कॉन्फ़िगर करने के लिए, पहले से मौजूद तीन तरीकों का इस्तेमाल किया जाता है.
setCheck
JavaScript
input.setCheck('Number');
इस वैकल्पिक फ़ंक्शन का इस्तेमाल, कनेक्ट किए गए इनपुट के टाइप की जांच करने के लिए किया जाता है. अगर शून्य का तर्क दिया जाता है, तो डिफ़ॉल्ट तौर पर, यह इनपुट किसी भी ब्लॉक से कनेक्ट किया जा सकता है. ज़्यादा जानकारी के लिए, टाइप की जांच देखें.
setAlign
JavaScript
input.setAlign(Blockly.inputs.Align.RIGHT);
इस वैकल्पिक फ़ंक्शन का इस्तेमाल फ़ील्ड को अलाइन करने के लिए किया जाता है (नीचे देखें). खुद की जानकारी देने वाली तीन वैल्यू हैं, जिन्हें इस फ़ंक्शन में आर्ग्युमेंट के तौर पर पास किया जा सकता है:
Blockly.inputs.Align.LEFT, Blockly.inputs.Align.RIGHT, और
Blockly.inputs.Align.CENTER.
RTL (अरबी और हिब्रू) के लिए ब्लॉक डिज़ाइन करते समय, बाएं और दाएं ब्लॉक किए जाते हैं.
इसलिए, Blockly.inputs.Align.RIGHT फ़ील्ड को बाईं ओर अलाइन करेगा.
appendField
इनपुट के बन जाने और उसे appendInput वाले ब्लॉक में जोड़ने के बाद, इनपुट में कितने भी फ़ील्ड जोड़े जा सकते हैं. हर इनपुट का काम क्या है, यह बताने के लिए अक्सर इन फ़ील्ड का इस्तेमाल लेबल के तौर पर किया जाता है.
JavaScript
input.appendField('hello');
सबसे आसान फ़ील्ड एलिमेंट टेक्स्ट है. ब्लॉकली का सिद्धांत है, नाम (जैसे कि Google, SQL) को छोड़कर, बाकी सभी लोअरकेस टेक्स्ट का.
इनपुट लाइन में कितने भी फ़ील्ड एलिमेंट हो सकते हैं. एक ही इनपुट पंक्ति में कई फ़ील्ड को असरदार तरीके से जोड़ने के लिए, कई appendField कॉल को एक साथ जोड़ा जा सकता है.
JavaScript
input.appendField('hello')
.appendField(new Blockly.FieldLabel('Neil', 'person'));
असल में, appendField('hello') कॉल, साफ़ तौर पर दिए गए
FieldLabel कंस्ट्रक्टर का इस्तेमाल करने का शॉर्टकट है: appendField(new Blockly.FieldLabel('hello')).
कंस्ट्रक्टर का इस्तेमाल सिर्फ़ तब किया जा सकता है, जब
क्लास का नाम तय किया गया हो, ताकि टेक्स्ट को सीएसएस नियम का इस्तेमाल करके स्टाइल किया जा सके.
इनलाइन बनाम बाहरी
ब्लॉक इनपुट दो तरह से रेंडर हो सकता है: बाहरी या अंदरूनी.
ब्लॉक की परिभाषा एक वैकल्पिक बूलियन तय कर सकती है. इससे यह कंट्रोल किया जा सकता है कि इनपुट इनलाइन हैं या नहीं. अगर false है, तो कोई भी वैल्यू इनपुट बाहरी होगा (जैसे कि बायां ब्लॉक). अगर true है, तो कोई भी वैल्यू इनपुट इनलाइन होंगे (जैसे, ऊपर दिया गया दायां ब्लॉक).
JSON
{
// ...,
"inputsInline": true
}
JavaScript
init: function() {
// ...
this.setInputsInline(true);
}
अगर तय नहीं किया जाता है, तो ब्लॉकी कुछ अनुमानों का इस्तेमाल करके अनुमान लगाएगा कि कौनसा मोड सबसे अच्छा है. यह मानते हुए कि ब्लॉकली सही विकल्प चुनता है, इस फ़ील्ड को तय न रखना बेहतर होगा, क्योंकि अलग-अलग भाषा के अनुवादों के मोड अपने-आप अलग हो सकते हैं. इस पेज पर पहले "set %1 to %2" (बाहरी इनपुट) और "put %2 in %1" (इनलाइन इनपुट) का JSON उदाहरण देखें.
जब किसी ब्लॉक में नंबर जैसे छोटे इनपुट होने की संभावना हो, तब इनलाइन इनपुट का इस्तेमाल करें.
अगर collapse कॉन्फ़िगरेशन चालू है, तो उपयोगकर्ता इस विकल्प को संदर्भ मेन्यू से टॉगल कर सकता है. अगर टूलबॉक्स में कैटगरी हैं, तो यह डिफ़ॉल्ट रूप से 'सही' पर सेट हो जाता है.
फ़ील्ड
फ़ील्ड किसी ब्लॉक में ज़्यादातर यूज़र इंटरफ़ेस (यूआई) एलिमेंट को तय करते हैं. इनमें स्ट्रिंग और संख्याओं
जैसे लिटरल डेटा के लिए
स्ट्रिंग लेबल, इमेज और इनपुट शामिल होते हैं. सबसे आसान उदाहरण math_number ब्लॉक है, जो
उपयोगकर्ता को नंबर टाइप करने की अनुमति देने के लिए field_input का इस्तेमाल करता है.
फ़ील्ड को ब्लॉक में appendField का इस्तेमाल करके जोड़ा जाता है.
ब्लॉकली कई बिल्ट-इन फ़ील्ड देता है. इनमें टेक्स्ट इनपुट, कलर पिकर, और इमेज शामिल हैं. आपके पास फ़ील्ड बनाने का विकल्प भी होता है.
→ पहले से मौजूद फ़ील्ड के बारे में ज़्यादा जानकारी.
→ कस्टम फ़ील्ड बनाने के बारे में ज़्यादा जानकारी.
आइकॉन
आइकॉन, ब्लॉक पर यूज़र इंटरफ़ेस (यूआई) एलिमेंट को परिभाषित करते हैं, जो ब्लॉक के बारे में "मेटा" जानकारी दिखाते हैं.
आइकॉन को addIcon का इस्तेमाल करके ब्लॉक में जोड़ा जाता है.
ब्लॉकली में टिप्पणी और चेतावनी वाले आइकॉन के साथ कई बिल्ट-इन आइकॉन मौजूद होते हैं. आपके पास अपने आइकॉन बनाने का भी विकल्प होता है.
→ कस्टम आइकॉन बनाने के बारे में ज़्यादा जानकारी.
टूलटिप
जब उपयोगकर्ता किसी ब्लॉक पर अपना माउस घुमाता है, तो टूलटिप तुरंत मदद करता है. अगर टेक्स्ट लंबा है, तो वह अपने-आप रैप हो जाएगा.
JSON
{
// ...,
"tooltip": "Tooltip text."
}
JavaScript
init: function() {
this.setTooltip("Tooltip text.");
}
JavaScript API में, टूलटिप को स्टैटिक स्ट्रिंग के बजाय
एक फ़ंक्शन के तौर पर भी बताया जा सकता है. इससे आपको डाइनैमिक मदद की अनुमति मिलती है. टूलटिप के उदाहरण के लिए, math_arithmetic देखें. यह इस बात पर निर्भर करता है कि कौनसा ड्रॉपडाउन विकल्प चुना गया है.
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];
});
}
};
JavaScript API का इस्तेमाल करके, ब्लॉक एक फ़ंक्शन तय कर सकता है, न कि
स्टैटिक स्ट्रिंग, जो टूलटिप स्ट्रिंग देती है. इससे डाइनैमिक टूलटिप की अनुमति मिलती है.
उदाहरण के लिए, math_arithmetic देखें.
पसंद के मुताबिक बनाना
कस्टम रेंडरिंग फ़ंक्शन देकर, टूलटिप को अपनी पसंद के मुताबिक बनाया जा सकता है. दो पैरामीटर स्वीकार करने वाला फ़ंक्शन बनाएं:
- पहला,
<div>एलिमेंट, जिसमें आपको कॉन्टेंट को रेंडर करना होगा - दूसरा, वह एलिमेंट जिस पर कर्सर ले जाया जा रहा है और उसके लिए टूलटिप
फ़ंक्शन के मुख्य भाग में, आप अपनी पसंद की सामग्री को div में रेंडर कर सकते हैं. ब्लॉक पर तय की गई टूलटिप स्ट्रिंग पर माउस ले जाने के लिए, आप Blockly.Tooltip.getTooltipOfObject(element); को कॉल कर सकते हैं, जहां element ऊपर दिया गया दूसरा पैरामीटर है.
आखिर में, इस फ़ंक्शन को रजिस्टर करें, ताकि ब्लॉकली इसे सही समय पर कॉल कर सके:
Blockly.Tooltip.setCustomTooltip(yourFnHere);
उदाहरण के लिए, कस्टम टूलटिप का डेमो देखें.
सहायता यूआरएल
ब्लॉक के साथ एक सहायता पेज जुड़ा हो सकता है. यह ब्लॉक पर राइट क्लिक करके और संदर्भ मेन्यू से "सहायता" को चुनकर, 'वेब के लिए ब्लॉकली' के उपयोगकर्ताओं के लिए उपलब्ध है. अगर यह वैल्यू null है, तो मेन्यू को
धूसर कर दिया जाएगा.
JSON
{
// ...,
"helpUrl": "https://en.wikipedia.org/wiki/For_loop"
}
JavaScript
init: function() {
// ...
this.setHelpUrl('https://en.wikipedia.org/wiki/For_loop');
}
JavaScript API का इस्तेमाल करके, ब्लॉक एक स्टैटिक स्ट्रिंग के बजाय फ़ंक्शन तय कर सकते हैं जो यूआरएल स्ट्रिंग दिखाता है. इस तरह, डाइनैमिक मदद मिल सकती है.
लिसनर और पुष्टि करने वाले टूल में बदलाव करें
ब्लॉक में, सुनने वाले फ़ंक्शन में बदलाव हो सकते हैं. ये फ़ंक्शन, फ़ाइल फ़ोल्डर में किए जाने वाले किसी भी बदलाव पर लागू होते हैं. इनमें, ब्लॉक से जुड़े फ़ंक्शन भी शामिल नहीं होते. इनका इस्तेमाल मुख्य रूप से, फ़ाइल फ़ोल्डर के बाहर ब्लॉक की चेतावनी वाला टेक्स्ट या उपयोगकर्ता से मिलती-जुलती सूचना सेट करने के लिए किया जाता है.
इस फ़ंक्शन को, एक फ़ंक्शन के साथ setOnChange को कॉल करके जोड़ा जाता है. अगर आपको इसे सभी प्लैटफ़ॉर्म पर इस्तेमाल करना है, तो इसे init के दौरान या JSON एक्सटेंशन के ज़रिए किया जा सकता है.
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.');
}
});
}
}
सिस्टम, बदलाव इवेंट को पास करते हुए फ़ंक्शन को कॉल करता है.
फ़ंक्शन में, this का मतलब ब्लॉक इंस्टेंस से है.
किसी भी बदलाव पर फ़ंक्शन को कॉल किया जाता है, इसलिए अगर इसका इस्तेमाल किया जाता है, तो डेवलपर को यह पक्का करना चाहिए कि लिसनर फटाफट काम करे. काम करने की जगह में होने वाले ऐसे बदलावों पर भी ध्यान देना चाहिए जो पॉडकास्ट सुनने वाले लोगों की नज़र में आ सकते हैं या वापस आ सकते हैं.
उदाहरण के लिए, controls_flow_statements, logic_compare, और procedures_ifreturn ब्लॉक देखें.
ध्यान दें कि इनपुट की पुष्टि करने और खराब असर डालने के लिए, बदलाव किए जा सकने वाले फ़ील्ड के अपने इवेंट लिसनर होते हैं.
म्यूटेटर
म्यूटेटर, बेहतर ब्लॉक को आकार बदलने की अनुमति देते हैं. इसकी सबसे खास वजह यह है कि उपयोगकर्ता कॉम्पोनेंट को जोड़ने, हटाने या फिर से व्यवस्थित करने के लिए डायलॉग बॉक्स खोलते हैं. JSON के ज़रिए, mutator कुंजी का इस्तेमाल करके म्यूटेटर जोड़े जा सकते हैं.
JSON
{
// ...,
"mutator":"if_else_mutator"
}
हर ब्लॉक के लिए कॉन्फ़िगरेशन
ब्लॉक इंस्टेंस में कई प्रॉपर्टी होती हैं, जो यह कॉन्फ़िगर करती हैं कि वे उपयोगकर्ता के साथ कैसे व्यवहार करते हैं. इनका इस्तेमाल, डोमेन की कुछ प्रॉपर्टी दिखाने के लिए, फ़ाइल फ़ोल्डर को छोटा करने के लिए किया जा सकता है (उदाहरण के लिए, सिर्फ़ एक 'स्टार्ट' इवेंट होता है) या उपयोगकर्ता की कोशिश (जैसे, ट्यूटोरियल) पर फ़ोकस करने के लिए.
हटाने लायक स्थिति
block.setDeletable(false);
अगर इस नीति को 'गलत है' पर सेट किया जाता है, तो उपयोगकर्ता ब्लॉक को नहीं मिटा सकता. किसी बदलाव किए जा सकने वाले फ़ाइल फ़ोल्डर पर, डिफ़ॉल्ट रूप से डिलीट करने के लिए ब्लॉक करता है.
कोई भी ब्लॉक (यहां तक कि ऐसे ब्लॉक भी जिन्हें अनइंस्टॉल नहीं किया जा सकता) प्रोग्राम के हिसाब से, प्रोग्राम के हिसाब से मिटाया जा सकता है:
block.dispose();
बदलाव किए जा सकने की स्थिति
block.setEditable(false);
अगर नीति को 'गलत है' पर सेट किया जाता है, तो उपयोगकर्ता ब्लॉक के फ़ील्ड (उदाहरण के लिए, ड्रॉपडाउन और टेक्स्ट इनपुट) में बदलाव नहीं कर पाएंगे. बदलाव करने लायक फ़ाइल फ़ोल्डर पर, डिफ़ॉल्ट रूप से बदलाव किए जा सकते हैं.
मूवेबल स्टेट
block.setMovable(false);
अगर नीति को 'गलत है' पर सेट किया जाता है, तो उपयोगकर्ता सीधे ब्लॉक को मूव नहीं कर पाएगा. एक अचल ब्लॉक जो किसी दूसरे ब्लॉक का चाइल्ड है, हो सकता है उसे उस ब्लॉक से डिसकनेक्ट न किया जाए. हालांकि, अगर पैरंट ब्लॉक को दूसरी जगह ले जाया जाता है, तो वह अपने पैरंट ब्लॉक के साथ चला जाएगा. ब्लॉक करता है, यह डिफ़ॉल्ट रूप से बदलाव किए जा सकने वाले फ़ाइल फ़ोल्डर पर ले जाया जा सकता है.
किसी भी ब्लॉक (यहां तक कि एक जगह से दूसरी जगह नहीं ले जाया जा सकने वाला) को भी प्रोग्राम के हिसाब से, फ़ाइल फ़ोल्डर में भेजा जा सकता है.
block.moveBy(dx, dy)
फ़ाइल फ़ोल्डर में, ब्लॉक की शुरुआती स्थिति (0, 0) होती है.
डेटा ब्लॉक करें
this.data = '16dcb3a4-bd39-11e4-8dfc-aa07a5b093db';
डेटा एक वैकल्पिक और आर्बिट्रेरी स्ट्रिंग है, जो ब्लॉक से जुड़ी होती है. जब ब्लॉक को सीरियलाइज़ किया जाता है, तो डेटा स्ट्रिंग में सीरीज़ भी क्रम से लगाई जाती है. ऐसा तब भी होता है, जब ब्लॉक को डुप्लीकेट बनाया गया हो या कॉपी/पेस्ट किया गया हो.
अक्सर इसका इस्तेमाल किसी ब्लॉक को बाहरी संसाधन से जोड़ने के लिए किया जाता है.
JSON के क्रम में रखने पर, डेटा को ब्लॉक में टॉप लेवल प्रॉपर्टी के तौर पर सेव किया जाता है:
{
"type": "my_block",
"data": "16dcb3a4-bd39-11e4-8dfc-aa07a5b093db",
// etc..
}
एक्सएमएल (पुराने आइसबॉक्स किए गए सीरियलाइज़ेशन सिस्टम) में सीरियलाइज़ किए जाने पर, डेटा स्ट्रिंग ब्लॉक के अंदर <data></data> टैग में स्टोर की जाती है:
<block type="my_block">
<data>16dcb3a4-bd39-11e4-8dfc-aa07a5b093db</data>
<!-- etc... -->
</block>
तबाही
ब्लॉक में destroy हुक होता है. इसे फ़ाइल फ़ोल्डर से मिटाए जाने पर कहा जाता है. इसका इस्तेमाल ब्लॉक से जुड़े किसी भी बैकिंग डेटा मॉडल/बाहरी रिसॉर्स को खत्म करने के लिए किया जा सकता है, जिनकी अब ज़रूरत नहीं है.
JSON
{
// ...,
"extensions":["destroy"],
}
Blockly.Extensions.registerMixin('destroy', {
destroy: function() {
this.myResource.dispose();
}
});
JavaScript
Blockly.Blocks['block_type'] = {
destroy: function() {
this.myResource.dispose();
}
}
ब्लॉक के पैरंट फ़ोल्डर को हटाए जाने के बाद, destroy तरीके को कॉल किया जाता है. हालांकि, इसके किसी भी चाइल्ड या फ़ील्ड को हटाए जाने से पहले ऐसा किया जाता है.
संदर्भ मेनू
ब्लॉक में, डिफ़ॉल्ट रूप से राइट क्लिक संदर्भ मेन्यू होता है. इससे उपयोगकर्ता, टिप्पणी करने या डुप्लीकेट ब्लॉक करने जैसे काम कर सकते हैं.
किसी ब्लॉक के संदर्भ मेन्यू को बंद करने के लिए, ये काम किए जा सकते हैं:
block.contextMenu = false;
मेन्यू में दिखाए गए विकल्पों को अपनी पसंद के मुताबिक भी बनाया जा सकता है. सभी ब्लॉक के लिए मेन्यू को पसंद के मुताबिक बनाने के लिए, कॉन्टेक्स्ट मेन्यू का दस्तावेज़ देखें.
किसी ब्लॉक के हिसाब से मेन्यू को अपनी पसंद के मुताबिक बनाने के लिए, customContextMenu को लागू किया जा सकता है. यह फ़ंक्शन, मेन्यू के विकल्पों की एक कैटगरी तय करता है और उसे अपनी
जगह पर अपने हिसाब से बदल देता है. इसका मतलब है कि आपके पास आइटम जोड़ने और हटाने का विकल्प है.
मेन्यू का हर विकल्प, तीन प्रॉपर्टी वाला एक ऑब्जेक्ट होता है:
textडिसप्ले टेक्स्ट है.enabledबूलियन है. बंद होने पर यह विकल्प धूसर टेक्स्ट के साथ दिखता है.- विकल्प पर क्लिक किए जाने पर,
callbackफ़ंक्शन को कॉल किया जा सकता है.